/* ===============================
   UNIVERSAL BUTTON ENGINE
================================*/
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
/*   border-radius:6px; */
	border-radius: var(--btn-radius, 6px);
  border:none;
  white-space:nowrap;
  transition:all .25s ease;
  
}

.btn-sm{height:var(--btn-h,36px);min-width:120px;padding:0 18px;font-size:15px;}
.btn-md{height:var(--btn-h,44px);min-width:140px;padding:0 10px;font-size:15px;}
.btn-lg{height:var(--btn-h,52px);min-width:160px;padding:0 5px;font-size:16px;}
.btn-xl{height:var(--btn-h,60px);min-width:180px;padding:0 34px;font-size:18px;}

.btn{
  width: var(--btn-w, auto);
/*   padding: var(--btn-py, 10px) var(--btn-px, 10px); */
padding:var(--btn-py,initial) var(--btn-px,initial);
  margin-top:    var(--btn-mt, 0) !important;
  margin-right:  var(--btn-mr, 0) !important;
  margin-bottom: var(--btn-mb, 0) !important;
  margin-left:   var(--btn-ml, 0) !important;
}

.btn-dark{
  background:#000;
  color:#fff;
border: 1px solid #000000;
/* 	font-size: 15px; */
    font-weight: 100;
	
}
.btn-dark:hover{
  
	background-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
}
 .btn-dark span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .btn-dark::before {
        color: #ffffff;
    }

    /* Hover state text */
    .btn-dark::after {
        color: #000000;
    }
.btn-pink{
  background:#e9124d;
  color:#fff;
}
.btn-pink:hover{
  background:#fff;
/* 	color:#000; */
border: 1px solid #000;
}
 .btn-pink span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .btn-pink::before {
        color: #ffffff;
    }

    /* Hover state text */
    .btn-pink::after {
        color: #000000;
    }
.btn-navy{
  background:#101e69;
  color:#fff;
}
.btn-navy:hover{
  background:#000;
  box-shadow:0 0 14px rgba(16,30,105,.35);
}
 .btn-navy span {
        visibility: hidden;
    }
    /* Before hover text */
    .btn-navy::before {
        color: #ffffff;
    }

    /* After hover text */
    .btn-navy::after {
        color: #ffffff;
    }
.btn-blue{
  background:#305cde;
  color:#fff;
}
.btn-blue:hover{
  background:#1e90ff;
}

.btn-white{
  background:#fff;
  color:#000;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.btn-white:hover{
  background:#1e90ff;
/*   color:#fff; */
	 box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
}
 .btn-white span {
        visibility: hidden;
    }

    /* Hover effect */
   .btn-white:hover {
        background-color: #1e90ff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .btn-white::before {
        color: black;
    }

    .btn-white::after {
        color: white;
    }

.btn-outline-dark{
  background:#fff;
  border:2px solid #000;
  color:#000;
}
.btn-outline-dark:hover{
  background:#000;
/*   color:#fff; */
}
 .btn-outline-dark span {
        visibility: hidden;
        display: none;
    }


    /* Hover state */
   .btn-outline-dark:hover {
        background-color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .btn-outline-dark::before {
        color: black;
    }

    .btn-outline-dark::after {
        color: white;
    }
.btn-gradient{
  color:#fff;
  background:linear-gradient(270deg,#F61351,#1e90ff,#F61351);
  background-size:400% 400%;
  animation:gradientWave 6s ease infinite;
}
.btn-gradient:hover{
  animation:none;
  filter:brightness(.9);
background: linear-gradient(to right, #d01045, #1a78c5) !important;
     
}
.btn-gradient.button-text-animation::before,
.btn-gradient.button-text-animation::after {
  color:#fff;
}


.btn-gradient span {
        visibility: hidden;
        display: inline-block;
        height: 0;
        overflow: hidden;
    }
    /* Before hover text */
    .btn-gradient::before {
        color: #ffffff;
    }

    /* After hover text */
    .btn-gradient::after {
        color: #ffffff;
    }
@media (max-width:768px){
  a.btn{
    margin-top:var(--btn-mt,0px) !important;
    margin-bottom:var(--btn-mb,0px) !important;
  }
  a.btn[data-mobile-center="1"]{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:fit-content;
  }
}


@keyframes gradientWave{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
/* ==================================
   SLIDING TEXT ANIMATION (FIXED)
===================================*/

/* ==================================
   SLIDING TEXT ANIMATION (AUTO FIXED)
===================================*/

.button-animation{
  position:relative;
  overflow:hidden;
}

/* hide only the real text, not the button */
.button-animation{
/*   color:inherit; */
	color:transparent;
	
}

/* animation layers */
.button-animation::before,
.button-animation::after{
  content:attr(data-text);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  transition:all .35s ease;
  pointer-events:none;
}

/* main visible text */
.button-animation::before{
  opacity:1;
}

/* second text hidden */
.button-animation::after{
  top:120%;
  opacity:0;
}


/* hover animation */
.button-animation:hover::before{
  top:-120%;
  opacity:0;
}

.button-animation:hover::after{
  top:50%;
  opacity:1;
}



.reqdemo .btn::before,
.reqdemo .btn::after{
  font-weight:700 !important;
}

a.gotoplanner {
    font-size: 14px !important;
}

.btn-align-fix {
  position: absolute !important;
 top: 55px;
    right: -113px;
}
/* Mobile Override */
@media (max-width: 768px){
  .btn{
    width: var(--btn-mw, var(--btn-w, auto));
    height: var(--btn-mh, var(--btn-h, auto));
  }
}