::placeholder {
  color: #6a7815 !important;
  opacity: 0.8 !important; /* Firefox */
  font-weight:bold
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: #6a7815 !important;
}
  
* {
  scrollbar-color: rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16) transparent;
}

*::-webkit-scrollbar {
  width: 0rem;
  height: 0rem;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

* {
  box-sizing: border-box;
}

html {
height: 100vh;
overflow-y:auto ;
}

body{ 
position:relative;
top:0px;
bottom:0px;
left:0px;
right:0px;

 
background: #C2F9FF;
background: -webkit-linear-gradient(0deg, rgba(194, 249, 255, 1) 39%, rgba(70, 201, 255, 1) 100%);
background: -moz-linear-gradient(0deg, rgba(194, 249, 255, 1) 39%, rgba(70, 201, 255, 1) 100%);
background: linear-gradient(0deg, rgba(194, 249, 255, 1) 39%, rgba(70, 201, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C2F9FF", endColorstr="#46C9FF", GradientType=0);
   margin: 0;
   font-family: verdana;
   font-size: 14px;
   color:#000;
background-attachment:fixed;
background-size:cover
   
}


 
    
a{
    font-family: "DynaPuff", system-ui !important;
	 
	text-decoration:none;
	font-style:normal !important;
	font-weight:300 !important;
}

a:hover {

	 
	text-decoration:none;
	 
}
 

.font-bebas{
	 font-family: "Bebas Neue", sans-serif;
}
.offcanvas-backdrop{
	z-index:100 !important;
	background-color:transparent !important;
	     backdrop-filter: blur(15pt) !important;
   -webkit-backdrop-filter: blur(15pt) !important;
   backdrop-filter: blur(15pt) !important;
}

.offcanvas-backdrop.show{
	opacity:1 !important
}
.sidebar{  
font-family: "Roboto Slab", serif;  
}
 
.text-lighter-green{
color:#f9fed5  !important;
text-shadow:#000   1px 1px  1px
}



.text-lighter-brown{
color:#a66534  !important;
 text-shadow:#FFF   0px 1px  1px

}
.text-green{
color:#73a81c;
}
      
  
.text-green{
color:#73a81c;
}
      
.bg-green{
background-color:#73a81c;
}

.bg-blured{ 
	z-index:-1;
	height:100%;
	width:100%;
	display:inline-block;
	position:fixed;
	right:0;
	left:0;
	top:0;
	bottom:0;
	
	 
 
}  

.bg-lyt{
background-color:#fff6c485;
}
 

.small-xxx{
	 font-size:11px;
 }

 
.text-glow{ 
text-shadow: 1px 1px 1px #FFF, 5px    5px  5px #FFF, 0 0 50px #FFF ;
}

.text-brown{
 color:#844618;
}
.text-danger{
	 
	color: #ff6535 !important 
}

.text-lighter{
	color:#FFF !important;
text-shadow: 1px 1px 1px #000  ;

}
 
   
a.text-green{
color:#325002d6;
}

a.text-green:hover{
color:#a66534;
}
  
 

@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar {
    -webkit-transition: none;
    transition: none;
  }
}

*::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.32);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}


 

.btn-green{
 font-family: "DynaPuff", system-ui !important;
color::#834c16 !important;
background-color:#73a81c;  
font-size:14pt;
text-decoration:none
}



.btn-green:hover{

	 color:#FFF !important;
   background-color:#8fcb2d;
      text-decoration:none
} 
.btn-dark{ 
 

     font-family: "DynaPuff", system-ui !important;
     background-image: url('../img/btn.png'); 
     background-repeat:no-repeat;
     background-position:center ;
                             
    color::#834c16 !important;
    background-color:#73a81c;  
    font-size:14pt;
    text-decoration:none;
border:0
}

.btn-dark:hover{
	 color:#e9fdb5 !important;
    opacity:80%;
	 
} 
 

.bg-black{
	background-color:#000;
}

.bg-black-trans{
		background-color:#0000005c !important; 
}
.bg-white-trans{
		background-color:#FFFFFF5c !important; 
}

.blured-3{
   
    backdrop-filter: blur(3px);
  
}
 
.blured-5{
	 backdrop-filter: blur(5px);
  
}

.blured-10{
 
    backdrop-filter: blur(10px);
 
}


.blured-15{
 
   backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
 
}



.blured-50{
   border: 1px solid #f9f6f624  ;
   backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
 
}
 
.search-bar {
 border: 1px solid #ffffff26 !important;
  backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
background-color:#73a81cb3;  } 
 

.modal-blured{
   border: 1px solid #ffffff26 !important;
  backdrop-filter: blur(10pt) !important;
   -webkit-backdrop-filter: blur(10pt) !important;
   backdrop-filter: blur(10pt) !important;
 
}

 
.blured-500{
   border: 1px solid #ffffff26 !important;
  backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
    background-color:#73a81cb3;  
 
}

.card{
	 
    border: 1px solid #ffffff26 !important;
 
}
 
.card-body{
	margin-bottom:0px  !important; 
	padding:15px;
	min-width:300px;
background-color:#73a81c;
border-radius:5px;
color:#f5fcd7;;
 
}


.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
 
}

.btn{
	 letter-spacing:1.5px;
	 text-shadow:none !important;
	 font-family: "Bebas Neue", sans-serif !important;
}

.dashboard-box{ 
 

}

.dashboard-heading{
  margin:0px;
  padding:0px;
  font-size:1.2rem; 
  font-family: "DynaPuff", system-ui;
  font-weight: 300;
  font-style: normal; 
  letter-spacing:1.2px;
color:#668820 !important
}	



.dashboard-box .dynapuff{
   color:#668820;
    font-family: "DynaPuff", system-ui;

}


.page-header{
  font-family: "DynaPuff", system-ui;
  font-weight: 400;
  font-size:1.4rem;
  font-style: normal; 
  color:#a66534  !important ;
text-shadow: 0px 1px 1px #FFF;
}
   
 
.section_header {
 color:#668820;
    font-family: "DynaPuff", system-ui;
}


.section_header p{
	 
}


.border{
 
	 border: 1px solid #f9f6f624 !important;
}
 
.form_area{
     background-color:#f9d9ad57;
     border-radius:5px;
	   

  
    backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
}

.form_title h3 , {
	 font-size:18px !important;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 300;
	 color:#ffda4e;
	 margin-bottom:15px;
	 
}


.form_area .form-control , .form-control  {
 
	 
	border:none;
	 
	color:#000 !important; 
	font-weight: 300 !important;
    background:transparent;
    background-color:#f9fed5 ;
    backdrop-filter: blur(50pt) !important;
   -webkit-backdrop-filter: blur(50pt) !important;
   backdrop-filter: blur(50pt) !important;
}

.btn-warning{
 
background-color:#cda21d !important;
}
 
.btn-grad ,  .custom_btn,  .gold-btn{
background-color:#dbce00;
	background-image: url('../img/btn-img.png'); 
    background-size:100% 100%;
    font-family: "DynaPuff", system-ui !important;
	color:#3d4701 !important;
    text-decoration:none;
    font-weight:heavy;
font-size:14pt
	 
}
  
         
.custom_btn:hover , .gold-btn:hover{
	 text-decoration:none;
	color:#FFF !important;
	background-color:#000 !important;
	border-color::#000 !important;
    
}

.plan_title{
	 font-size:28px !important;
     font-family: "Bebas Neue", sans-serif;
     font-weight: 300;
	 color:#ffda4e;
	 margin-bottom:15px;
	 background-color:#000;
	 padding:5px;
}

.plan_header{
	 font-size:22px !important;
     font-family: "Bebas Neue", sans-serif;
     font-weight: 400;
	 color:#FFF;
	 
}

.plan_price{
	 font-size:22px !important;
     font-family: "Bebas Neue", sans-serif;
     font-weight: 400;
	 color:#ffda4e;
	 
}

 
.modal-header{
	 font-size:24px !important;
     font-family: "DynaPuff", system-ui;
     font-weight: 400;
	 color:#FFF;
	 background-color:#73a81c;
	 display:block;
	 width:100%;
 
     border-radius:0px;
	
	 
}
.plan_text{
	 font-size:22px !important;
     font-family: "Bebas Neue", sans-serif;
	 color:#000;
	 
}
 
 .carousel-control-next-icon{
	 background-color:#000;
	 background-image:none;
	border-radius:1rem
 }
 
   
.nav-link  a{
color:#fdfdfd !important;}
  
.nav-link {
      color:#fdfdfd !important;
	 font-size:12pt !important;
	 letter-spacing:1.1px;
	font-family: "Bebas Neue", sans-serif;
    background-color:#00000047;
    &:hover,
    &:focus {
	  background-color:#00000047 !important;
	border-color::#67513b  !important;
	text-spacing:1px;
     
  } 
}


.nav-pills {
  
  .nav-link.active,
  .show > .nav-link {
     background-color:#836546!important;
 
	color:#eaffc7 !important;
  }
}
 
@media (min-width: 768px) {
  .position-md-static {
    position: relative !important;
  }
 .position-md-relative {
    position: relative !important;
  }

  .min-vh-md-none {
    min-height: auto !important;
  }

     




} 


       
 

.owl-theme .owl-nav {
position:relative!:
 

}


#content .dashboard-box h5{ 
 font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
color:#a66534  !important;
 text-shadow:#FFF   0px 1px  1px

}

 
.gradient-background {
  
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
 


$back: #863334;
$primary: #f5f5fb;
$duration: 3200ms;

#count, .dot {
  offset-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
  position: absolute;
}
#count {
  animation: pathy $duration  infinite linear;
  offset-distance: 0;
  color: $primary;
  display: inline-block; //none; //inline-block;
  text-align: center;
}
.dot {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: $primary;
  border-radius: 50%;
  opacity: 0;
  animation: pulse $duration infinite ease-in-out;
  
  &:nth-of-type(1) {
    offset-distance: 10%;
    animation-delay: ($duration/10);
  }
  &:nth-of-type(2) {
    offset-distance: 20%;
    animation-delay: ($duration/10 * 2);
  }
  &:nth-of-type(3) {
    offset-distance: 30%;
    animation-delay: ($duration/10 * 3);
  }
  &:nth-of-type(4) {
    offset-distance: 40%;
    animation-delay: ($duration/10 * 4);
  }
  &:nth-of-type(5) {
    offset-distance: 50%;
    animation-delay: ($duration/10 * 5);
  }
  &:nth-of-type(6) {
    offset-distance: 60%;
    animation-delay: ($duration/10 * 6);
  }
  &:nth-of-type(7) {
    offset-distance: 70%;
    animation-delay: ($duration/10 * 7);
  }
  &:nth-of-type(8) {
    offset-distance: 80%;
    animation-delay: ($duration/10 * 8);
  }
  &:nth-of-type(9) {
    offset-distance: 90%;
    animation-delay: ($duration/10 * 9);
  }
  &:nth-of-type(10) {
    offset-distance: 0%;
    animation-delay: 0ms;
  }
  
  &:nth-of-type(11) {
    offset-distance: 5%;
    animation-delay: ($duration/20);
  }
  &:nth-of-type(12) {
    offset-distance: 15%;
    animation-delay: ($duration/20 * 3);
  }
  &:nth-of-type(13) {
    offset-distance: 25%;
    animation-delay: ($duration/20 * 5);
  }
  &:nth-of-type(14) {
    offset-distance: 35%;
    animation-delay: ($duration/20 * 7);
  }
  &:nth-of-type(15) {
    offset-distance: 45%;
    animation-delay: ($duration/20 * 9);
  }
  &:nth-of-type(16) {
    offset-distance: 55%;
    animation-delay: ($duration/20 * 11);
  }
  &:nth-of-type(17) {
    offset-distance: 65%;
    animation-delay: ($duration/20 * 13);
  }
  &:nth-of-type(18) {
    offset-distance: 75%;
    animation-delay: ($duration/20 * 15);
  }
  &:nth-of-type(19) {
    offset-distance: 85%;
    animation-delay: ($duration/20 * 17);
  }
  &:nth-of-type(20) {
    offset-distance: 95%;
    animation-delay: ($duration/20 * 19);
  }
}

@keyframes pathy {
  100% {
    offset-distance: 100%;
  }
}
@keyframes pulse {
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.message {
  display: none;
  .no-motionpath & {
    display: block;
    color: $primary;
    padding: 1rem;
  }
}



 

 
.butterfly {
    animation: hover 250ms cubic-bezier(.48,.01,.54,1) infinite;
    animation-direction: alternate;
    animation-fill-mode: reverse;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0px);
    width: 30px;
    
    &::before {
        background: darken($color-background,55%);
        border-radius: 50%;
        content: '';
        display: block;
        height: 110px;
        left: 50%;
        margin-left:-10px;
        outline: 1px solid transparent;
        position: absolute;
        top: -15px;
        transform: rotatey(100deg);
        width: 20px;
        z-index: 2;
    }
}

.shadow {
    animation: shadow 250ms cubic-bezier(.48,.01,.54,1) infinite;
    animation-direction: alternate;
    animation-fill-mode: reverse;
    background: #000;
    border-radius: 50%;
    display: block;
    height: 10px;
    opacity: 0.1;
    transform-origin: 50% 50%;
    transform: translateX(-40px) translateY(100px);
    width: 100px;

}

.wing {
    background: #888;
    display: block;
    opacity: 0.7;
    outline: 1px solid transparent;
    position: absolute;
    top: 0;
    
    &:first-child {
        animation: leftflap 250ms cubic-bezier(.48,.01,.54,1) infinite;
        animation-direction: alternate;
        animation-fill-mode: reverse;
        height: 1px;
        left: 0;
        transform: rotateY(-20deg);
        transform-origin: 700% 50%;
        width: 1px;
        z-index: 3;
    }
    
    &:last-child {
        animation: rightflap 250ms cubic-bezier(.48,.01,.54,1) infinite;
        animation-direction: alternate;
        animation-fill-mode: reverse;
        right:0;
        transform: rotateY(200deg);
        z-index: 1;
    }
    
    .bit {
        background: dodgerblue;
    }
    .bit::after {
        background: $color-sub-wing;
    }
    
    .bit, .bit::after {
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        transform-origin: 100% 50%;
    }
    
    .bit:first-child {
        height: 70px;
        text-align: center;
        top: 15px;
        transform: rotateZ(40deg);
        width: 130px;
        
        &::after {
            content: '';
            display: inline-block;
            height: 60px;
            left: -30px;
            top: 5px;
            width: 100px;
        }
    }
    
    .bit:last-child {
        height: 55px;
        transform: rotateZ(-40deg);
        width: 100px;
        
        &::after {
            content: '';
            display: inline-block;
            height: 45px;
            left: -24px;
            top: 5px;
            width: 60px;
            z-index:1;
        }
    }
}

@keyframes hover {
    0% {
        transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(0px);
    }

    100% {
        transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(-3px);
    }
}

@keyframes shadow {
    0% {
        transform: translateX(-40px) translateY(100px) scale(1,1);
    }

    100% {
        transform: translateX(-40px) translateY(100px) scale(1.1,1.1);
    }
}

@keyframes leftflap {
    0% {
        transform: rotateY(-20deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}

@keyframes rightflap {
    0% {
        transform: rotateY(200deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}