:root{
  --maincolor:#032B0D;
  --subcolor:#95FA04;
  --abtcolor:#e0e8c4;
}
*{
    font-family: poppins;
    text-transform: capitalize;
}
/* header  */
.navbar{
    background-color: hsl(135, 87%, 9%);
}
.navbar-toggler{
  border: none;
}

#signup{
    position: relative;
    border-radius: 25px;
    padding: 10px 25px;
    position: absolute;
    right: 60px;
    background-color: #90F807;
    color: hsl(135, 87%, 9%);
    font-size: small;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: hsl(135, 87%, 9%);
    font-weight: bold;
}
.navbar-nav > li:hover{
    background-color: #90F807;
    
}
.nav-item{
  padding:0 20px;
  border-radius: 25px;
  font-weight: bold;
}
#signup::before{
    animation: shine 1.5s ease-out infinite;
}
#signup::before{
    content: "";
    position: absolute;
    width: 100px;
    height: 40px;
    border-radius: 25px;
    background-image: linear-gradient(
        120deg, rgba(255, 255, 255, 0) 10% ,rgba(255, 255, 255, 0.5) 40%,rgba(255, 255, 255, 0) 50%
    );
    top: 0;
    left: 0px;
    opacity: 0.2px;
}
@keyframes shine{
    0% {
        left: 0px;
    }
    60%{
        left: 35%;
    }
    to{
        left: 0%;
    }
}
.form-group{
  border: 1px solid #032a0d;
  border-radius: 10px;
}
#login{
    border-radius: 25px;
    padding: 10px 25px;
    font-size: small;
}
#login:hover{
    background-color: #90F807;
}
.logform{
  margin: 0 20%;
} 

/* Banner */
.banner{
  background-size: cover;
  height: 550px;
  width: 100%;
}
.hbanlog{
  position: absolute;
  top: 100px;
  right: 0px;
  animation: hbanlogani 2s linear infinite;
}
@keyframes hbanlogani{
  0%{
    top: 100px;
  }
  50%{
    top: 70px;
  }
  100%{
    top: 100px;
  }
}

h1{
    position: absolute;
    top: 200px;
    left: 300px;
    color: hsl(135, 87%, 9%); 
}
h1 > span {
    color: #90F807;
}
#heading2{
    position: absolute;
    top: 200px;
    left: 550px;
    color: hsl(135, 87%, 9%);
}
#heading2 span{
  color: #90F807;
}
#headpara{
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  top: 120px;
  left: 480px;
  color: white;
  
}
#headpara2{
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  top: 120px;
  left: 600px;
  color: white;
  
}
.banbtn{
  position: absolute;
  top: 300px;
  left: 550px;
}
.banbtn2{
  position: absolute;
  top: 350px;
  left: 700px;
}
 
/* About */
h2{
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}
#abt-banner{
  width: 100%;
  height: 400px;
}
#abt-head{
  position: absolute;
  top: 170px;
  left: 700px; 
  font-weight: 700; 
}
#abt-head::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: transparent;
  background: linear-gradient(90deg, transparent 0%, #e0e8c4 5%, #e0e8c4 40%);
  animation: headani 3s ease-out forwards;
}
@keyframes headani{
  0%{
    left: 10%;
  }
  50%{
    left: 70%;
  }
  100%{
    left: 100%;
  }
} 
#abt-breadcrumb{
  position: absolute;
  top: 250px;
  left: 700px; 
}
#abt-breadcrumb li a{
  color: var(--maincolor);
}
#abt-breadcrumb .active {
  color: var(--subcolor);
}
.abt-lists{
  list-style-image: url(fruit.png);
  line-height: 50px;
  vertical-align: center;
  padding-left: 30%;
}
.knab{
  background: linear-gradient(135deg, #143806 0%, #90f807 100%);
    color: white;
    border: none;
    width: 200px;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px #143806;
}
#habimg{
  animation: abroll 20s infinite linear;
}
@keyframes abroll{
  from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
} 
.abimg2{
  transition: hover 2s;
  cursor: pointer;
  filter: drop-shadow(0 0 20px var(--maincolor));
}
.abimg2:hover{
    transform: scale(2);
    filter: drop-shadow(0 0 20px var(--subcolor));
}
.vm-title{
  color: var(--subcolor);
  font-weight: 700;
  margin-top: 10px;
}
.vm-content{
  color: black;
  line-height: 40px;
  text-align: center;
}/* Counter */
.counter-wrapper{
  background: url(counter.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10rem 9%;
  position: relative;
}
.counter-wrapper::before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
}
.counter{
  text-align: center;
  z-index: 2;
  position: relative;
  color: white;
}
.counter::before{
  position: absolute;
  content: '';
  bottom: -2rem;
  left: 50%;
  width: 20%;
  height: .2rem;
  background: var(--subcolor);
  transform: translate(-50%);
  --webkit-transform: translateX(-50%);
  --moz-transform: translateX(-50%);
  --ms-transform: translateX(-50%);
  --o-transform: translateX(-50%);
}
.counter .countz{
  font-size: 2rem;
  margin-bottom: 1rem;
}
.counter p{
  font-size: 1.4rem;
  font-weight: 700;
}
/* Services */
#services{
    width: 100%;
    background: hsl(135, 87%, 9%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
#services h2{
    color: white;
    margin-top: 50px;
    position: relative;
}
.cards{
    display: flex;
    justify-content: space-evenly;
    gap: 25px;
    z-index: 9;
    margin-top: 20px;
    margin-bottom: 100px;

}
.cards .card{
    margin: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    background-color: black;
    position: relative;
    border-radius: 10px;
    
}
.cards .card::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: #90F807;
    z-index: -1;
}
.cards .card:hover.card::before{
    transform: rotate(10deg);
}
.cards .card .s-icons{
    border-radius: 50%;
    margin-top: 40px;
    margin-bottom: 25px;
    background-color: #90F807;;
    position: relative;
    height: 100px;
    width: 100px;
    animation: s-iconsani 2s infinite ease;
    
}
@keyframes s-iconsani {
    0%{
        box-shadow: 0 0 20px yellow;
    }
    40%{
        box-shadow: 0 0 2px #90F807;
    }
    40%{
        box-shadow: 0 0 20px yellow;
    }
    100%{
        box-shadow: 0 0 2px #90F807;
    }
}
.s-icons img{
    position: absolute;
    top: 10%;
    left: 10%;
}
.cards .card h3{
    font-size: x-large;
    color: yellowgreen;
    margin-bottom: 10px;
    
}
.cards .card p{
    font-size: small;
    line-height: 30px;
    color: white;
    margin-bottom: 10px;
    font-weight: 500;
    text-align: center;
}
.ser-btn{
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    background-color: #90F807;
    color: hsl(135, 87%, 9%);
    font-weight: bold;
    transition: width 2s;
}
.ser-btn:hover{
    width: 50%;
}
/* diet plans */
.diet .controls{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0 25px;
}
.diet .controls .buttons{
  display: flex;
  justify-content: space-evenly;
  padding: 0;
  background-color: white;
  cursor: pointer;
  margin-bottom: 3rem;
  box-shadow: 0 0 20px grey;
  text-align: center;
  border-radius: 25px;
}
.diet .controls .buttons img{
  height: 50px;
  margin-top: 10px;
}
.diet .controls .buttons h3{
  font-size: 20px;
  padding-top: 1rem;
  color: #202020;
}
.diet .controls .buttons.active{
  background: var(--subcolor);
}
.image-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0px 20px;
}
.diet .image-container .box{
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 20px grey;
  position: relative;
}
.diet .image-container .box .image{
  height: 250px;
  overflow: hidden;
  width: 100%;
}
.diet .image-container .box .image img{
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.diet .image-container .box:hover .image img{
  transform: scale(1.1);
}
.diet .image-container .box .content{
  padding: 10px;
}
.diet .image-container .box .content a{
  font-size: 25px;
  font-weight: bold;
  color: hsl(135, 87%, 9%);
  text-decoration: none;

}
.diet .image-container .box .content p{
  padding: 1rem 0;
  font-size: medium;
  color: #141414;
  line-height: 2;

}
.diet .image-container .box .content .icon{
  position: absolute;
  bottom: 5px;
}
.diet .image-container .box .content .icon a{
  text-decoration: none;
  font-size: 16px;
  color: black;
}
.diet .image-container .box .content .icon a:hover{
  color: #032a0d;
}
.diet .image-container .box .content .icon a i{
  padding-right: 8px;
  color: #90F807;
}
/* meal plan slider */
#mp-banner{
  width: 100%;
  height: 400px;
}
#mp-head{
  position: absolute;
  top: 170px;
  left: 700px; 
  font-weight: 700; 
}
#mp-head::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: transparent;
  background: linear-gradient(90deg, transparent 0%, #e0e8c4 5%, #e0e8c4 40%);
  animation: mpheadani 3s ease-out forwards;
}
@keyframes mpheadani{
  0%{
    left: 10%;
  }
  50%{
    left: 70%;
  }
  100%{
    left: 100%;
  }
} 
#mp-breadcrumb{
  position: absolute;
  top: 250px;
  left: 700px; 
}
#mp-breadcrumb li a{
  color: var(--maincolor);
}
#mp-breadcrumb .active {
  color: var(--subcolor);
}
.cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.mcard {
  margin: 30px auto;
  width: 300px;
  height: 300px;
  border-radius: 40px;
  box-shadow: 0 0 10px var(--maincolor);
  cursor: pointer;
  transition: 0.4s;
}

.mcard .card_image {
  width: 100%;
  height: 100%;
  border-radius: 40px;
}

.mcard .card_image img {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  object-fit: cover;
}

.mcard .card_title {
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  font-weight: bold;
  font-size: 18px;
  margin-top: -30px;
  color: var(--maincolor);
  height: 40px;
}

.mcard:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 0 0 10px var(--subcolor);
}

/* pricing */
/*Accordion*/
.accordion-button:not(.collapsed) {
  color: green;
}
.accordion-button:focus {
  border-color: var(--subcolor);
  box-shadow: 0 0 0 .25rem rgba(47, 248, 28, 0.25);
}
#pri-head{
  position: absolute;
  top: 170px;
  left: 700px; 
  font-weight: 700; 
}
#pri-head::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: transparent;
  background: linear-gradient(90deg, transparent 0%, #e0e8c4 5%, #e0e8c4 40%);
  animation: priheadani 3s ease-out forwards;
}
@keyframes priheadani{
  0%{
    left: 10%;
  }
  50%{
    left: 70%;
  }
  100%{
    left: 100%;
  }
} 
#pri-breadcrumb{
  position: absolute;
  top: 250px;
  left: 700px; 
}
#pri-breadcrumb li a{
  color: var(--maincolor);
}
#pri-breadcrumb .active {
  color: var(--subcolor);
}
.pricing{
  background: #081d00;
  padding-bottom: 50px;
  padding-top: 50px;
}
.pricing .box-container{
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  gap: 20px;
  padding-top: 50px;
}
.pricing .box-container .box{
  border-radius: 1rem;
  overflow: hidden;
  background: white;
  padding: 70px;
}
.pricing .box-container .box .active{
  background: #90f807;
  transform: scale(1.1);
}
.pricing .box-container .title{
  margin: 1rem 0;
  font-size: large;
  color: black;
  text-transform: uppercase;
}
.pricing .box-container .box .price{
  color: #032a0d;
  margin-bottom: 20px;
}
.pricing .box-container .box .price .currency{
  font-size: 50px;
  line-height: 20px;
  font-weight: 300;
}
.pricing .box-container .box .price .amount{
  font-size: 50px;
  line-height: 50px;
  font-weight: 700;
}
.pricing .box-container .box .price .duration{
  font-size: 20px;
  letter-spacing: .2rem;
  font-weight: 400;
}
.pricing .box-container .box ul{
  margin: 0 auto 20px;
}
.pricing .box-container .box ul li{
  text-align: left;
  list-style: none;
  font-size: medium;
  padding-left: 0px;
  margin: 1rem auto;
  color: grey;
}
.pricing .box-container .box ul li i{
  color: #032a0d;
  padding-right: 20px;
}
.pricing .box-container .box p{
  font-size: small;
  color: grey;
  margin: 1.3rem auto;
  text-align: center;

}
.pribtn {
  background: linear-gradient(135deg, #143806 0%, #90f807 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px #143806;
}

.pribtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px #081d00;
}
/*codepen pricing*/
#elite-pricing-container{
	margin-top:50px;
	position:relative;
	display: flex;
	align-items:flex-start;
	justify-content: center;
	flex-wrap:wrap;
	box-sizing:border-box;
}

#elite-pricing-sales-text{
	
	padding-right:80px;
	text-align:right;
	font-size:24px;
	font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif;
	color: #555555;
	line-height: 1.5;
	font-weight: 700;
	max-width:450px;
	padding-top:90px;
}

#elite-pricing-card.price-card{
	max-width:330px;
	color:white;
	position: relative;
	margin: 0 6px;
	padding: 30px 40px 10px 40px;
	background: url('https://images.unsplash.com/photo-1464639351491-a172c2aa2911?ixlib=rb-0.3.5&s=427721bc23b5d868669d8f0ba09c8710&auto=format&fit=crop&w=1200&q=80') left top no-repeat black;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}


#elite-pricing-card.price-card .price-card--header{
	padding:0;
	background-color:transparent;
}

#elite-pricing-card.price-card .price-card--header h4{
	font-size: 36px;
	font-weight: 600;
	padding-bottom:16px;
	margin-bottom:16px;
	border-bottom: 1px solid #f0c328;
	
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top left, #efd100 0, #e2a233 38%, #f0c328 60%, #fff1a3 86%, #ffe13e 100%);
  background-size: 1em 1em;
  color: #fff1a3;
}

#elite-pricing-card.price-card #elite-pricing-card--desc{
	padding-bottom:25px;
}

#elite-pricing-card.price-card .price-card--features{
	border-top: 1px solid #f0c328;
}

#elite-pricing-card.price-card ul.price-card--features--list{
	padding:0 11px;
}

#elite-pricing-card.price-card .price-card--features--item{
	padding-bottom:16px;
}

#elite-pricing-card.price-card .price-card--features--item:before{
color:#f0c328 !important;
	left:-12px !important;
}


#elite-pricing-card.price-card .price-card--cta--button.btn{
  background-color: #f0c328;
	color:black;
	margin:0 auto;
}
#elite-pricing-card.price-card .price-card--cta--button.btn:hover{
	background-color:white;
}

#elite-pricing-card--desc{
	font-size:16px;
	line-height:1.5;
	max-width:400px;
  
}


/* - - - - - - - - - Tooltips - - - */

.has-tooltip:not(.tooltip-disabled) {
	cursor: help;
	position:relative;
}

.has-tooltip:not(.tooltip-disabled):hover
	.tooltip-container {
	display: block;
}

.has-tooltip .tooltip-container {
	display: none;
	position: absolute;
	background-color: white;
	z-index: 20;
	bottom: calc(100% + 13px);
	left: -10px;
	right: -10px;
	padding: 16px 20px;
	border-radius: 8px;
	box-shadow: 0 6px 55px -10px #777;
}
.has-tooltip .tooltip-container:after {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid white;
	font-size: 0;
	line-height: 0;
	content: "";
	position: absolute;
	bottom: -10px;
}

.has-tooltip .tooltip-container h6 {
	font-weight: 600;
	font-size: 16px;
	margin: 0px;
}

.has-tooltip .tooltip-container p {
	color: #555;
	margin-top:4px;
}
/* - - - - - - - End Tooltips - - - */





#pricing-container * {
	box-sizing:border-box;
}

#pricing-container {
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	-webkit-font-smoothing: antialiased;
	max-width: 1080px;
	margin: 0 auto 50px;
	justify-content: center;
	line-height: 1;
	color: #000;
}



/* Cards */

#pricing-cards {
	display: flex;
	font-size: 14px;
}

#pricing-container .price-card {
	background-color: white;
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	display: block;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.25s;
	position: relative;
	margin: 0 6px;
	flex-grow: 1;
	flex-shrink:1;
}

#pricing-container .price-card:hover {
	transform: translateY(-5px);
		box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.14),
		0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}


/* - - - - - - - - - Header Section - - - */

#pricing-container .price-card--header {
	background-color: #daf1df;
	margin: 0;
	padding: 20px 0;
	text-align: center;
}

#pricing-container .price-card--header h4 {
	margin: 0;
	padding: 0;
	font-size: 28px;
	color: #1b5e20;
	font-family: "Raleway", Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
}


/* - - - - - - - - - Price Section - - - */

#pricing-container .price-card--price {
	text-align: center;
	padding: 28px 0 6px 0;
}

#pricing-container .price-card--price-text {
	font-size: 48px;
}

#pricing-container .price-card--price-number {
	font-weight: 500;
	opacity: 0.89;
}

.odometer div {
	display: inline-block;
}

#pricing-container .price-card--price-number:before {
	content: "$";
	font-size: 24px;
	top: -16px;
	display: inline-block;
	position: relative;
}

#pricing-container .price-card--price-number:after {
	content: "/month";
	font-size: 12px;
	display: inline-block;
	color: grey;
}

#pricing-container .price-card--price-conditions {
	padding: 14px 0;
	color: #888;
	line-height: 1.5;
}

#pricing-container .price-card--onboarding-fee {
	color: green;
}

#pricing-container .price-card--onboarding-fee.has-fee {
	color: #888;
}


/* - - - - - - - - - CTA Button Section - - - */

#pricing-container .price-card--cta {
	padding: 0 20px 24px;
	text-align: center;
}

#pricing-container .price-card--cta--button.btn{
	min-width:20px;
	display:block;
	max-width:183px;
	margin:0 auto;
}





/* - - - - - - - - - Features Section - - - */

#pricing-container .price-card--features {
	border-top: 1px solid #ddd;
	padding: 16px 0 20px;
}

#pricing-container ul.price-card--features--list {
	padding: 0 32px;
	list-style: none;
	margin: 0;
}

#pricing-container li.price-card--features--item {
	margin: 8px 0;
	padding-left: 8px;
	line-height: 1.5;
	position: relative;
}

#pricing-container
	li.price-card--features--item:not(.features-disabled):before {
	content: "✓";
	color: green;
	display: block;
	position: absolute;
	left: -8px;
}

#pricing-container li.price-card--features--item.features-highlight {
	/* 	font-weight: 600; */
}

#pricing-container li.price-card--features--item.features-disabled {
	opacity: 0.1;
	/* 	text-decoration: line-through; */
}




/* - - - - - - - - - Mobile Features Toggle - - - */

#pricing-container .price-card--mobile-features-toggle {
	text-align: center;
	border-top: 1px solid #ddd;
	margin: 24px 0 0;
	padding: 16px 0;
	cursor: pointer;
	display: none;
	color: green;
}

#pricing-container .price-card--mobile-features-toggle:after {
	content: "Show All Features ▾";
}
#pricing-container .price-card--mobile-features-toggle.hideall:after {
	content: "Hide Features ▴";
}

/* - - - - - - - - - Hero Card Styles - - - */

#pricing-container .price-card--hero {
	margin: -38px 6px 0;
	/* 	width:31%; */
	z-index: 10;
}

#pricing-container .price-card--hero-text {
	background-color: #3f9b63;
	height: 38px;
	color: white;
	line-height: 38px;
	text-align: center;
	font-weight: 600;
}

/* - - - - - - - - - Only Yearly Basic Styles - - - */

#pricing-container .only-yearly {
	position: relative;
}

#pricing-container .only-yearly .price-card--price-number {
	transition: opacity 0.2s;
}

#pricing-container .only-yearly .only-yearly--text {
	position: absolute;
	top: -0.2em;
	left: 0;
	right: 0;
	display: none;
}
#pricing-container .only-yearly .only-yearly--text span {
	font-size: 14px;
}

#pricing-container .only-yearly.if-monthly .price-card--price-number {
	opacity: 0;
}

#pricing-container .only-yearly.if-monthly .only-yearly--text {
	display: block;
}

/* - - - - - - - - - Switch Section - - - */

#pricing-switch {
	margin: 80px auto 100px;
	text-align: center;
	line-height: 1.4;
	position: relative;
	max-width: 1080px;
}

#pricing-switch .switch-label {
	display: inline-block;
	width: 200px;
	text-align: center;
	opacity: 0.4;
	font-size: 16px;
	cursor: pointer;
	padding: 0 20px;
}

#pricing-switch .switch-label .save-money {
	color: #4caf50;
	font-style: italic;
	padding-left: 8px;
}
#pricing-switch .save-money--mobile {
	color: #4caf50;
	font-style: italic;
	padding-top: 22px;
	display: none;
}

#pricing-switch .switch-label.active {
	font-size: 18px;
	opacity: 1;
}
#pricing-switch .switch-label-monthly {
	text-align: right;
}
#pricing-switch .switch-label-yearly {
	text-align: left;
}

#pricing-switch .switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	vertical-align: -50%;
	margin: 0;
}

#pricing-switch .switch input {
	display: none;
}

#pricing-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #3f9b63;
	border-radius: 34px;
	-webkit-transition: 0.1s;
	transition: 0.1s;
}

#pricing-switch .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	-webkit-transition: 0.1s;
	transition: 0.1s;
}

/* #pricing-switch input:checked + .slider {
	background-color: green;
} */

#pricing-switch input:focus + .slider {
	box-shadow: 0 0 1px #2196f3;
}

#pricing-switch input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* ****************** */
/* Odometer Theme CSS */
/* ****************** */
/* https://raw.githubusercontent.com/HubSpot/odometer/master/themes/odometer-theme-default.css */

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
	display: inline-block;
	vertical-align: middle;
	vertical-align: auto;
	zoom: 1;
	display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
	display: inline-block;
	vertical-align: middle;
	vertical-align: auto;
	zoom: 1;
	display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
	display: inline-block;
	vertical-align: middle;
	vertical-align: auto;
	zoom: 1;
	display: inline;
	visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
	text-align: left;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
	display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
	display: block;
	-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
	display: block;
	-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme
	.odometer-digit
	.odometer-value.odometer-last-value,
.odometer.odometer-theme-default
	.odometer-digit
	.odometer-value.odometer-last-value {
	position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down
	.odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
	font-family: "Helvetica Neue", sans-serif;
	line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
	text-align: center;
}

/* ************************** */
/* UPDATES TO CHANGE DURATION */
/* ************************** */

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-ms-transition: -ms-transform 0.4s;
	-o-transition: -o-transform 0.4s;
	transition: transform 0.4s;
	will-change: auto;
}

/* testimonials */
.testimonial-container {
    background-color: #90F807;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%2390F807' cx='50' cy='0' r='50'/%3E%3Cg fill='%2385ed12' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%237ae219' cx='50' cy='100' r='50'/%3E%3Cg fill='%2370d71d' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%2366cc20' cx='50' cy='200' r='50'/%3E%3Cg fill='%235cc122' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%2353b623' cx='50' cy='300' r='50'/%3E%3Cg fill='%234aab24' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%2341a124' cx='50' cy='400' r='50'/%3E%3Cg fill='%23399624' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%23328c23' cx='50' cy='500' r='50'/%3E%3Cg fill='%232a8122' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23247721' cx='50' cy='600' r='50'/%3E%3Cg fill='%231d6d20' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%2317631e' cx='50' cy='700' r='50'/%3E%3Cg fill='%2312591c' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%230d4f19' cx='50' cy='800' r='50'/%3E%3Cg fill='%23084517' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23053c14' cx='50' cy='900' r='50'/%3E%3Cg fill='%23043311' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23032A0D' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: contain;
    width: 100%;
    padding: 2rem;
    padding: 100px;
  }
  .testimonial-grid {
    display: grid;
    gap: 5rem;
  }
  .testimage-container {
    position: relative;
    width: 80%;
    height: 24rem;
    perspective: 1000px;
  }
  .testimonial-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  .testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .tname {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.25rem;
  }
  .designation {
    font-size: 0.875rem;
    color: var(--subcolor);
    margin-bottom: 2rem;
  }
  .quote {
    font-size: 1.125rem;
    color: 032a0d;
    line-height: 1.75;
    color: white;
  }
  .arrow-buttons {
    display: flex;
    gap: 1rem;
    padding-top: 3rem;
  }
  .arrow-button {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--subcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .arrow-button:hover {
    background-color: #90F807;
  }
  .arrow-button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--maincolor);
    transition: transform 0.3s;
  }
  .arrow-button:hover svg {
    fill: #ffffff;
  }
  .prev-button:hover svg {
    transform: rotate(-12deg);
  }
  .next-button:hover svg {
    transform: rotate(12deg);
  }
  
/* contact   */
#con-img{
  border-radius: 25px;
  height:90%;
  width:90%;
}
#conhead{
  font-style: oblique;
}
#con-head{
  position: absolute;
  top: 170px;
  left: 700px; 
  font-weight: 700; 
}
#con-head::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: transparent;
  background: linear-gradient(90deg, transparent 0%, #e0e8c4 5%, #e0e8c4 40%);
  animation: conheadani 3s ease-out forwards;
}
@keyframes conheadani{
  0%{
    left: 0%;
  }
  30%{
    left: 30%;
  }
  60%{
    left: 65%;
  }
  100%{
    left: 100%;
  }
} 

#con-breadcrumb{
  position: absolute;
  top: 250px;
  left: 700px; 
}
#con-breadcrumb li a{
  color: var(--maincolor);
}
#con-breadcrumb .active {
  color: var(--subcolor);
}

 .contact-form {
    flex: 1.5;
    margin: 80px;
    padding: 50px;
    background-image: linear-gradient(319deg,  #143806 47%, #90f807 48%);
    min-width: 300px;
    border-radius: 25px;
  }
  form h2 {
    font-size: 28px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #143806 0%, #90f807 100%);
  -webkit-background-clip: text;
   background-clip: text;
    color: transparent;
  }
  
  .form-group {
    margin-bottom: 25px;
    position: relative;
  }
  
  input, textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #f9fafc;
  }
  
  input:focus, textarea:focus {
    outline: none;
    border-color: #90f807;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background: white;
  }
  
  label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #143806;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  
  input:focus + label, 
  input:not(:placeholder-shown) + label,
  textarea:focus + label,
  textarea:not(:placeholder-shown) + label {
    transform: translateY(-25px);
    font-size: 14px;
    color: #143806;
    background: white;
    padding: 0 5px;
  }
  
  textarea {
    min-height: 150px;
    resize: vertical;
  }
  
  .conbtn {
    background: linear-gradient(135deg, #143806 0%, #90f807 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px #143806;
  }
  
  .conbtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px #081d00;
  }
/* whatsapp animation */
#whatsapp{
  position: fixed;
  z-index: 10;
  bottom: 50px;
  right: 0px;
}
  /* marquee */
  .marquee {
    height: 25px;
    width: 100%;
    overflow: hidden;
  }
  
  .marquee div {
    display: block;
    width: 200%;
    position: fixed;
    overflow: hidden;
    background-image: linear-gradient(60deg, #49f506 50%, #081d00 50% );
    bottom: 0px;
    animation: marquee 30s ease-out infinite;
    z-index: 10;
  }
  
  .marquee span {
    float: left;
    width: 50%;
    color: white;
    padding: 15px;
  }
  
  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }
  /* Footer */
  ul {
    margin: 0px;
    padding: 0px;
}
.footer-section {
  background: #032a0d;
  position: relative;
}
.footer-cta {
  border-bottom: 1px solid #373636;
}
.single-cta i {
  color: #90f807;
  font-size: 30px;
  float: left;
  margin-top: 8px;
}
.cta-text {
  padding-left: 15px;
  display: inline-block;
}
.cta-text h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cta-text span {
  color: #757575;
  font-size: 15px;
}
.footer-content {
  position: relative;
  z-index: 2;
}
.footer-pattern img {
  position: absolute;
  top: 0;
  left: 0;
  height: 330px;
  background-size: cover;
  background-position: 100% 100%;
}
.footer-logo {
  margin-bottom: 30px;
}
.footer-logo img {
    max-width: 200px;
}
.footer-text p {
  margin-bottom: 14px;
  font-size: 14px;
      color: #7e7e7e;
  line-height: 28px;
}
.footer-social-icon span {
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 20px;
}
.footer-social-icon a {
  color: #fff;
  font-size: 16px;
  margin-right: 15px;
}
.footer-social-icon i {
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
}
.facebook-bg{
  background: #3B5998;
}
.twitter-bg{
  background: #55ACEE;
}
.google-bg{
  background: #DD4B39;
}
.footer-widget-heading h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
}
.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 50px;
  background: #90f807;
}
.footer-widget ul li {
  display: inline-block;
  float: left;
  width: 50%;
  margin-bottom: 12px;
}
.footer-widget ul li a:hover{
  color: #90f807;
}
.footer-widget ul li a {
  color: #878787;
  text-transform: capitalize;
  text-decoration: none;
}
.subscribe-form {
  position: relative;
  overflow: hidden;
}
.subscribe-form input {
  width: 100%;
  padding: 14px 28px;
  background: #2E2E2E;
  border: 1px solid #2E2E2E;
  color: #fff;
}
.subscribe-form button {
    position: absolute;
    right: 0;
    background:#90f807;
    padding: 13px 20px;
    top: 0;
}
.subscribe-form button i {
  color: #fff;
  font-size: 22px;
  transform: rotate(-6deg);
}
.copyright-area{
  background: #202020;
  padding: 25px 0;
}
.copyright-text p {
  margin: 0;
  font-size: 14px;
  color: #878787;
}
.copyright-text p a{
  color: #ff5e14;
}
.footer-menu li {
  display: inline-block;
  margin-left: 20px;
}
.footer-menu li:hover a{
  color: #ff5e14;
}
.footer-menu li a {
  font-size: 14px;
  color: #878787;
}