/*========== global button system css =========================================================
 * ==========================================================================================*/
/* ===============================
   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: 700;
	
}
.btn-dark:hover{
  background-color:#fff;
	color:#000;
	border: 1px solid #000000;
    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-navy-helper:hover {
	background-color: #101e69 !important;
	color:#fff !important;
}
.btn-pink{

    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff6fb1 0%, #dd1d44 100%) !important;
    background-position: 18px center;
    box-shadow: 0 4px 10px rgba(221, 29, 68, .4);
    font-size: 15px;
    font-weight: 700;
 
    line-height: 43px !important;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    transition: none !important;
    padding: 0px !important;position: relative;
    text-decoration: none;
    vertical-align: middle;
    border: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ba96f0 0%, #6d28d2 100%) !important;
    background-position: 18px center;
    box-shadow: 0 4px 10px #b98cfad9;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 43px !important;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    transition: none !important;
    padding: 0px !important;
}


.btn-navy{
  background:#101e69;
  color:#fff;
}
.btn-navy:hover{
  background:#000;
  box-shadow:0 0 14px rgba(16,30,105,.35);
}
 
.btn-blue{
  background:#0c6acc;
  color:#fff;
	font-size: 17px;
    font-weight: 700;
}
.btn-blue:hover{
  background:#000;
}


.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{
  background:#0c6acc;
  color:#fff;
	font-size: 17px;
    font-weight: 700;
}


.btn-gradient:hover{
  background:#000;
}
     

@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%;}
}

/* Mobile Override */
@media (max-width: 768px){
  .btn{
    width: var(--btn-mw, var(--btn-w, auto));
    height: var(--btn-mh, var(--btn-h, auto));
  }
}