/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* button new */

.wrap1 {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.button1 {

  min-width: 300px;

  min-height: 60px;

  font-family: 'Nunito', sans-serif;

  font-size: 22px;

  text-transform: uppercase;

  letter-spacing: 1.3px;

  font-weight: 700;

  color: #313133;

  background: #ffff99;

  background: linear-gradient(90deg, rgba(255,255,143,1) 0%, rgba(255,255,161,1) 100%);

  border-width: 0.6px;

  border-style: solid;

  border-radius: 1000px;

  box-shadow: 12px 12px 24px rgba(255,255,153,.55);

  transition: all 0.3s ease-in-out 0s;

  cursor: pointer;

  outline: none;

  position: relative;

  padding: 15px 10px 0px 10px;

  }



.button1::before {

content: '';

  border-radius: 1000px;

  min-width: calc(300px + 12px);

  min-height: calc(60px + 12px);

  border: 6px solid #00FFCB;

  box-shadow: 0 0 60px rgba(0,255,203,.64);

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0;

  transition: all .3s ease-in-out 0s;

}



.button1:hover, .button1:focus {

  color: #313133;

  transform: translateY(-6px);

}



.button1:hover::before, .button1:focus::before {

  opacity: 1;

}



.button1::after {

  content: '';

  width: 30px; height: 30px;

  border-radius: 100%;

  border: 6px solid #00FFCB;

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  animation: ring 1.5s infinite;

}



.button1:hover::after, .button1:focus::after {

  animation: none;

  display: none;

}



@keyframes ring {

  0% {

    width: 30px;

    height: 30px;

    opacity: 1;

  }

  100% {

    width: 300px;

    height: 300px;

    opacity: 0;

  }

}