.elementor-1213 .elementor-element.elementor-element-ea44cda{--display:flex;--min-height:100vh;--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:flex-end;--overflow:hidden;--padding-top:150px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-ea44cda:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-ea44cda > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFAA3B 0%, var( --e-global-color-e37e04d ) 100%);}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1213 .elementor-element.elementor-element-f8153d0.elementor-element{--align-self:center;}.elementor-1213 .elementor-element.elementor-element-08aebe1.elementor-element{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1213 .elementor-element.elementor-element-c3cc764{text-align:center;}.elementor-1213 .elementor-element.elementor-element-c3cc764 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:50px;font-weight:600;text-transform:uppercase;letter-spacing:3.5px;mix-blend-mode:multiply;color:var( --e-global-color-e37e04d );}.elementor-1213 .elementor-element.elementor-element-1b8c822{--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;--justify-content:space-between;}.elementor-1213 .elementor-element.elementor-element-588426d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1213 .elementor-element.elementor-element-d6d8aba{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1213 .elementor-element.elementor-element-d6d8aba > .elementor-widget-container{--e-transform-flipX:-1;margin:-170px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-d6d8aba.elementor-element{--align-self:center;}.elementor-1213 .elementor-element.elementor-element-8c820e4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-8c820e4.elementor-element{--order:-99999 /* order start hack */;}.elementor-1213 .elementor-element.elementor-element-cf4a4c1{--display:flex;}.elementor-1213 .elementor-element.elementor-element-4ece7e3{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1213 .elementor-element.elementor-element-4ece7e3 > .elementor-widget-container{margin:-170px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-4ece7e3.elementor-element{--align-self:center;}.elementor-1213 .elementor-element.elementor-element-05663e1.elementor-element{--order:-99999 /* order start hack */;}.elementor-1213 .elementor-element.elementor-element-c1fc856{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-c1fc856:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-c1fc856 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3ed8e21 );}.elementor-1213 .elementor-element.elementor-element-f2b6f84{--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;--border-radius:40px 40px 40px 40px;}.elementor-1213 .elementor-element.elementor-element-f2b6f84.e-con{--order:99999 /* order end hack */;}.elementor-1213 .elementor-element.elementor-element-c9d8670 > .elementor-widget-container{margin:0px 0px -125px 0px;}.elementor-1213 .elementor-element.elementor-element-c9d8670{text-align:center;}.elementor-1213 .elementor-element.elementor-element-c9d8670 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:180px;font-weight:600;text-transform:uppercase;letter-spacing:3.5px;mix-blend-mode:darken;color:#6B6B6B8A;}.elementor-1213 .elementor-element.elementor-element-65b9d46{text-align:center;}.elementor-1213 .elementor-element.elementor-element-65b9d46 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:50px;font-weight:600;text-transform:uppercase;letter-spacing:3.5px;mix-blend-mode:lighten;color:#888888;}.elementor-1213 .elementor-element.elementor-element-2a46669 > .elementor-widget-container{padding:25px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-2a46669{text-align:center;}.elementor-1213 .elementor-element.elementor-element-2a46669 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:23px;font-weight:600;text-transform:uppercase;letter-spacing:2px;word-spacing:3px;mix-blend-mode:color-dodge;color:var( --e-global-color-81abe96 );}.elementor-1213 .elementor-element.elementor-element-7a3db8c{text-align:center;}.elementor-1213 .elementor-element.elementor-element-7a3db8c .elementor-heading-title{font-family:"Konkhmer Sleokchher", Sans-serif;font-size:40px;font-weight:600;mix-blend-mode:color-dodge;color:var( --e-global-color-81abe96 );}.elementor-1213 .elementor-element.elementor-element-ae12f8f{--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;--justify-content:center;--border-radius:40px 40px 40px 40px;}.elementor-1213 .elementor-element.elementor-element-ae12f8f:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-ae12f8f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0000006B;}.elementor-1213 .elementor-element.elementor-element-ae12f8f.e-con{--order:99999 /* order end hack */;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1213 .elementor-element.elementor-element-5e22481 > .elementor-widget-container{padding:0% 5% 0% 3%;}.elementor-1213 .elementor-element.elementor-element-5e22481.elementor-element{--align-self:center;}.elementor-1213 .elementor-element.elementor-element-5e22481{text-align:center;font-family:"AvenirNextLTPro-MediumCn", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1213 .elementor-element.elementor-element-f892ff7{--display:flex;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:3;}.elementor-1213 .elementor-element.elementor-element-f892ff7:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-f892ff7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3ed8e21 );background-image:url("https://alegra.yombeetec.com/wp-content/uploads/como-trabajamos.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1213 .elementor-element.elementor-element-f892ff7::before, .elementor-1213 .elementor-element.elementor-element-f892ff7 > .elementor-background-video-container::before, .elementor-1213 .elementor-element.elementor-element-f892ff7 > .e-con-inner > .elementor-background-video-container::before, .elementor-1213 .elementor-element.elementor-element-f892ff7 > .elementor-background-slideshow::before, .elementor-1213 .elementor-element.elementor-element-f892ff7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1213 .elementor-element.elementor-element-f892ff7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(-90deg, var( --e-global-color-3ed8e21 ) 0%, #F2295B00 100%);}.elementor-1213 .elementor-element.elementor-element-ca02079{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-ca02079:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-ca02079 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-e37e04d );}.elementor-1213 .elementor-element.elementor-element-3a5edb3{--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;--border-radius:40px 40px 40px 40px;}.elementor-1213 .elementor-element.elementor-element-b0a6af6 > .elementor-widget-container{margin:0px 0px -125px 0px;}.elementor-1213 .elementor-element.elementor-element-b0a6af6{text-align:center;}.elementor-1213 .elementor-element.elementor-element-b0a6af6 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:180px;font-weight:600;text-transform:uppercase;letter-spacing:3.5px;mix-blend-mode:hue;color:#22FF0073;}.elementor-1213 .elementor-element.elementor-element-09e50eb{text-align:center;}.elementor-1213 .elementor-element.elementor-element-09e50eb .elementor-heading-title{font-family:"Konkhmer Sleokchher", Sans-serif;font-size:40px;font-weight:600;mix-blend-mode:screen;color:var( --e-global-color-81abe96 );}.elementor-1213 .elementor-element.elementor-element-0fe721a > .elementor-widget-container{padding:35px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-0fe721a{text-align:center;}.elementor-1213 .elementor-element.elementor-element-0fe721a .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:23px;font-weight:600;text-transform:uppercase;letter-spacing:2px;word-spacing:3px;mix-blend-mode:color-dodge;color:var( --e-global-color-81abe96 );}.elementor-1213 .elementor-element.elementor-element-caab59e{--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;--border-radius:40px 40px 40px 40px;}.elementor-1213 .elementor-element.elementor-element-caab59e:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-caab59e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0000006B;}.elementor-1213 .elementor-element.elementor-element-8a592fd > .elementor-widget-container{padding:0% 5% 0% 3%;}.elementor-1213 .elementor-element.elementor-element-8a592fd.elementor-element{--align-self:center;}.elementor-1213 .elementor-element.elementor-element-8a592fd{text-align:center;font-family:"AvenirNextLTPro-MediumCn", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1213 .elementor-element.elementor-element-de58505{--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;--overlay-opacity:1;}.elementor-1213 .elementor-element.elementor-element-de58505:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-de58505 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://alegra.yombeetec.com/wp-content/uploads/nuestro-compromiso-contigo.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1213 .elementor-element.elementor-element-de58505::before, .elementor-1213 .elementor-element.elementor-element-de58505 > .elementor-background-video-container::before, .elementor-1213 .elementor-element.elementor-element-de58505 > .e-con-inner > .elementor-background-video-container::before, .elementor-1213 .elementor-element.elementor-element-de58505 > .elementor-background-slideshow::before, .elementor-1213 .elementor-element.elementor-element-de58505 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1213 .elementor-element.elementor-element-de58505 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, var( --e-global-color-e37e04d ) 0%, #F2295B00 100%);}.elementor-1213 .elementor-element.elementor-element-87b3e79{--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;}.elementor-1213 .elementor-element.elementor-element-87b3e79:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-87b3e79 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0B6900 51%, var( --e-global-color-81abe96 ) 100%);}.elementor-1213 .elementor-element.elementor-element-87b3e79 > .elementor-shape-bottom .elementor-shape-fill, .elementor-1213 .elementor-element.elementor-element-87b3e79 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#08FF0021;}.elementor-1213 .elementor-element.elementor-element-87b3e79 > .elementor-shape-bottom svg, .elementor-1213 .elementor-element.elementor-element-87b3e79 > .e-con-inner > .elementor-shape-bottom svg{height:500px;}.elementor-1213 .elementor-element.elementor-element-364a30f{--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;--border-radius:40px 40px 40px 40px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1213 .elementor-element.elementor-element-364a30f:not(.elementor-motion-effects-element-type-background), .elementor-1213 .elementor-element.elementor-element-364a30f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0000006B;}.elementor-1213 .elementor-element.elementor-element-33f4b87 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1213 .elementor-element.elementor-element-33f4b87{text-align:center;}.elementor-1213 .elementor-element.elementor-element-33f4b87 .elementor-heading-title{font-family:"AvenirNextLTPro-Cn", Sans-serif;font-size:90px;font-weight:600;text-transform:uppercase;letter-spacing:10px;color:#22FF0073;}.elementor-1213 .elementor-element.elementor-element-30086fe > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1213 .elementor-element.elementor-element-1b8c822{--width:100%;}.elementor-1213 .elementor-element.elementor-element-588426d{--width:40%;}.elementor-1213 .elementor-element.elementor-element-cf4a4c1{--width:40%;}.elementor-1213 .elementor-element.elementor-element-f892ff7{--width:80%;}}@media(max-width:1024px){.elementor-1213 .elementor-element.elementor-element-ea44cda{--min-height:80vh;}.elementor-1213 .elementor-element.elementor-element-588426d{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-8c820e4 */.type--A {
  --line_color: #c9d58b;
  --back_color: #ffecf6;
}
.type--B {
  --line_color: #1b1919;
  --back_color: #e9ecff;
}
.type--C {
  --line_color: #08FF00;
  --back_color: #258A01;
}
.button {
  position: relative;
  z-index: 0;
  width: 300px;
  height: 66px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: var(--line_color);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}
.button__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 20px;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: var(--line_color);
  transition: all 0.5s ease;
}
.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}
.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}
.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}
.button__line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: solid 3px var(--line_color);
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}
.button:hover {
  letter-spacing: 6px;
}
.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}
.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}
.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  transform-origin: 16px 16px;
}
.button__drow1 {
  top: -16px;
  left: 40px;
  width: 32px;
  height: 0;
  transform: rotate(30deg);
}
.button__drow2 {
  top: 44px;
  left: 77px;
  width: 32px;
  height: 0;
  transform: rotate(-127deg);
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: "";
  position: absolute;
}
.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-60deg);
}
.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(69deg);
}
.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-146deg);
}
.button__drow2::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-262deg);
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: var(--back_color);
}
.button:hover .button__drow1 {
  animation: drow1 ease-in 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::before {
  animation: drow2 linear 0.08s 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::after {
  animation: drow3 linear 0.03s 0.14s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2 {
  animation: drow4 linear 0.06s 0.2s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::before {
  animation: drow3 linear 0.03s 0.26s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::after {
  animation: drow5 linear 0.06s 0.32s;
  animation-fill-mode: forwards;
}
@keyframes drow1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}
@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  100% {
    width: 120px;
  }
}
@keyframes drow3 {
  0% {
    width: 0;
  }
  100% {
    width: 80px;
  }
}
@keyframes drow4 {
  0% {
    height: 0;
  }
  100% {
    height: 120px;
  }
}
@keyframes drow5 {
  0% {
    width: 0;
  }
  100% {
    width: 124px;
  }
}

.container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button:not(:last-child) {
  margin-bottom: 64px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c1fc856 */.fondo-dinamico {
    background-image: url('/wp-content/uploads/fondo-movimiento-verde6.jpg'); /* Imagen de fondo */
    background-attachment: fixed; /* Imagen fija */
    background-repeat: no-repeat;
    background-size: cover; /* Que cubra todo el contenedor */


}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ca02079 */.fondo-dinamico2 {
    background-image: url('/wp-content/uploads/fondo-movimiento3.jpg'); /* Imagen de fondo */
    background-attachment: fixed; /* Imagen fija */
    background-repeat: no-repeat;
    background-size: cover; /* Que cubra todo el contenedor */
    background-position: 99% center; /* Posición inicial */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-30086fe */.type--A {
  --line_color: #c9d58b;
  --back_color: #ffecf6;
}
.type--B {
  --line_color: #1b1919;
  --back_color: #e9ecff;
}
.type--C {
  --line_color: #08FF00;
  --back_color: #258A01;
}
.button {
  position: relative;
  z-index: 0;
  width: 300px;
  height: 66px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: var(--line_color);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}
.button__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 20px;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: var(--line_color);
  transition: all 0.5s ease;
}
.button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button::after {
  top: 0;
  right: 54px;
  width: 8px;
}
.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}
.button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}
.button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}
.button__line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: solid 3px var(--line_color);
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before {
  left: 0;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before {
  right: 0;
}
.button:hover {
  letter-spacing: 6px;
}
.button:hover::before,
.button:hover .button__text::before {
  width: 8px;
}
.button:hover::after,
.button:hover .button__text::after {
  width: calc(100% - 56px * 2 - 16px);
}
.button__drow1,
.button__drow2 {
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  transform-origin: 16px 16px;
}
.button__drow1 {
  top: -16px;
  left: 40px;
  width: 32px;
  height: 0;
  transform: rotate(30deg);
}
.button__drow2 {
  top: 44px;
  left: 77px;
  width: 32px;
  height: 0;
  transform: rotate(-127deg);
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
  content: "";
  position: absolute;
}
.button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-60deg);
}
.button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(69deg);
}
.button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-146deg);
}
.button__drow2::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-262deg);
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
  background: var(--back_color);
}
.button:hover .button__drow1 {
  animation: drow1 ease-in 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::before {
  animation: drow2 linear 0.08s 0.06s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow1::after {
  animation: drow3 linear 0.03s 0.14s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2 {
  animation: drow4 linear 0.06s 0.2s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::before {
  animation: drow3 linear 0.03s 0.26s;
  animation-fill-mode: forwards;
}
.button:hover .button__drow2::after {
  animation: drow5 linear 0.06s 0.32s;
  animation-fill-mode: forwards;
}
@keyframes drow1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}
@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  100% {
    width: 120px;
  }
}
@keyframes drow3 {
  0% {
    width: 0;
  }
  100% {
    width: 80px;
  }
}
@keyframes drow4 {
  0% {
    height: 0;
  }
  100% {
    height: 120px;
  }
}
@keyframes drow5 {
  0% {
    width: 0;
  }
  100% {
    width: 124px;
  }
}

.container {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button:not(:last-child) {
  margin-bottom: 64px;
}/* End custom CSS */