@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], textarea

	{
		
		border: 1px solid #838383 !important;
		border-radius: 5px;
		outline: none !important;
		box-shadow: none !important;
		border: 1px solid #FE3F40;

	}

input[type="text"], input[type="email"], input[type="number"], textarea:focus

	{
		
		border: 1px solid #838383 !important;
		

	}

.btn
	
	{
		box-shadow: none !important;

	} 

select.form-control

	{
		border: 1px solid #838383 !important;
		border-radius: 3px;
		outline: none !important;
		box-shadow: none !important;
	}

textarea

	{
		border: 1px solid #838383 !important;
		border-radius: 3px;
		outline: none !important;
		box-shadow: none !important;
	}


*

	{
		margin: 0;
		padding: 0;
		font-family: 'Poppins', sans-serif;


	}

a

	{
		text-decoration: none !important;
	}

a:hover

	{
		text-decoration: none;
	}


:root {
  --main: #FF0001;
  --main2:  #2A2A2A;
 
}




.title

	{
		position: relative;
/*		color: var(--main);*/

		
	}


.title::before, .title::after

	{
	    content: "";
	    width: 4%;
	    height: 5px;
	   	background: var(--main);
	   	display: inline-block;
	}


.title::before, .title::after

	{
	    margin: 0 15px 10px 10px;
	}

.s-style

	{
		background: #082032;

		color: #fff;
		padding: 4px 6px 4px 6px;
	}




.heading-style

	{
		    position: absolute;
		    width: 100%;
		    left: 0;
		    top: 45px;
		    z-index: 1;
		    line-height: 0px;
	}

.heading-style i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--main2);
    margin: 0 -2px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


.heading-style i:nth-child(2) {
    width: 12px;
    height: 12px;
    background-color: var(--main);
}

















	/************************** Top Nav *************/

.top-nav 

	{
	            background: var(--main);
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
	}


.top-nav p 

	{
	    display: inline-block;
	    margin-bottom: 0;
	    margin-right: 10px;
	}

.top-nav span,
.top-nav i 

	{
	    vertical-align: middle;
	}


.top-nav a

	{
	    color: #fff;
	}

.top-nav a:hover

	{
	    color: #fff;
	}


.social-icons a

	{
	    
	    display: inline-flex;
	    color: #fff;
	    font-size: 20px;
	    text-decoration: none;
	    align-items: center;
	    justify-content: center;
	    border-radius: 100px;
	    position: relative;
	     background-color: rgba(255, 255, 255, 0.25);
	    padding: 5px;
	}

.social-icons a:hover

	{
		color: #fff;
	}

.navbar

	{
		background-color: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(15px);
    	transition: none 0s ease 0s;
	    border-bottom: 2px solid #eeee;

	    background-size: 3px 3px;

	        backdrop-filter: blur(3px);

	    box-shadow: 0 15px 55px 0rgba(0,0,0,.08)!important;
	    height: 90px !important;
	    z-index: 999 !important;
	   transition: 500ms ease-in;

	    position: relative;
  
	}



.navbar-brand img

	{
		height: 80px;
		position: relative;
		
		top: -4px;
		color: #fe3f40;
		font-weight: 600;
	}

.navbar-brand span

	{
		
		color: #03a4ed;
		
	}

.navbar-toggler

	{
		
		outline: none !important;
		background:  var(--main)!important;
		
		box-shadow: none !important;
		position: relative;
		bottom: 15px;
	}

.fa-bars

	{
		color: #fff !important;
		padding: 5px;
	}

.nav-item

	{
			
		
		margin-right: 10px;
		
	}

.nav-item::after 

	{
	    content: '';
	    display: block;
	    width: 0px;
	    height: 6px;
	    background: var(--main);
	    transition: width 0.5s ease-in;
	}

.nav-item:hover::after

	{
	    width: 100%;
	    transition: width 0.5s ease-in;
	    color: var(--main) !important;
	
	}

.nav-link

	{
		font-weight: 700 !important;
		color: #000 !important;
	}

.nav-link:hover

	{
		color: var(--main) !important;
	}





.navbar.shrink

	{
		 	height: 100px;
		  padding: 10px;
		 

	}


.navbar .navbar-brand img

 	{
	  height: 119px;
	}




.navbar.shrink .navbar-toggle

	{
		  padding: 4px 5px;
		  margin: 8px 15px 8px 0;
	}



	
}	


.welcome-section

	{
		text-align: justify;
  text-justify: inter-word;


  position: relative;
    z-index: 0;
    background-image: url(../images/Ban03.png);
    background-position: -231px 11px;
    background-repeat: no-repeat;
    background-size: 36% auto;
	}




.banner

	{
		
		background: linear-gradient(rgba(254, 63, 64, 0.6), rgba(3, 164, 237, 0.6)), url(../images/store.png) no-repeat;

		
		
		background-size: cover;
    background-position: center center;
    height: 100px;
    padding: 100px 40px 100px 0px;
		color: #fff;
	}


.banner a

	{
		
		color: #fff;
	}

.banner .breadcrumb-item.active 

	{
	    color: #fff;
	}
.single-box

	{
		padding-left: 49px;
	    padding-right: 30px;
	    height: 100%;
	    position: relative;
	    z-index: 1;
	    background: #CAC0BE;
	    border: 1px solid red;
	}

.single-box h2 

	{
	    font-size: 28px;
	    margin-bottom: 18px;
	}

.single-box-2

	{
		background-color: #E9E9E9;
		padding-left: 49px;
	    padding-right: 30px;
	    height: 100%;
	    position: relative;
	    z-index: 1;
	   
	}


.single-box-2 h2 

{
    font-size: 28px;
    margin-bottom: 13px;
    margin-top: 13px;
}



.latest-product-section

	{
		position: relative;
/*		background: #F7F6F9;
		background: var(--main);*/
		padding: 90px 0px 120px 0px;
		z-index: 0;
		background: linear-gradient(rgba(255, 0, 1, 0.6), rgba(255, 0, 1, 0.8)), url(../images/store.png);
		background-attachment: fixed;
		background-size: cover;
		color: #fff;
	
	}

.latest-product-section .custom-shape-divider-top-1667638606 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.latest-product-section .custom-shape-divider-top-1667638606 svg {
    position: relative;
    display: block;
    width: calc(114% + 1.3px);
    height: 98px;
}

.latest-product-section .custom-shape-divider-top-1667638606 .shape-fill {
    fill: #ffffff;
}


.latest-product-section  .custom-shape-divider-bottom-1668252907 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.latest-product-section  .custom-shape-divider-bottom-1668252907 svg {
    position: relative;
    display: block;
    width: calc(134% + 1.3px);
    height: 69px;
    transform: rotateY(180deg);
}

.latest-product-section .custom-shape-divider-bottom-1668252907 .shape-fill {
    fill: #FFFFFF;
}

.product-box

	{
		border: 1px solid #eee;
		
		padding: 20px;
		margin-top: 20px;

		box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
    	border-radius: 10px;
    	
    	transform: translateY(5px);

    	transition: all 0.6s ease 0s;
    	background: #fff;
    	position: relative;
    
    	cursor: pointer;
    	text-align: center;
	}

.product-box:hover

	{
		 transform: translateY(-3px);
		 box-shadow: 0px 0px 15px rgb(0 0 0 / 0%);
		 
		
		 background: #fff;
		 color: #000;
	
	}

.product-box::before

	{
		
		content: '';
		position: absolute;
		left: -1px;
		top: -1px;
		background: url(../images/element.png) no-repeat;
		
		height: 150px;
		width: 100px;
		display: none;
		
	}

.product-box:hover::before

	{
		
		
		display: block;
		
	}

.product-box-img

	{
		text-align: center;
	}

.product-box-img img

	{
		height: 180px;
		
	}

.cart-img

	{
		height: 60px !important;
	}

.product-box a.product-title

	{
		color: var(--main);
		font-size: 18px;
	}

.product-box a:hover

	{
		color: var(--main2);
		
	}

.btn-position

	{
		position: absolute;
		top: 50%;

		left: 14%;

		opacity: 0;
		transition: 0.5s ease-in;
	}

.product-box:hover .btn-position

	{
		display: block;
		opacity: 1;

		transform: translateY(-50px);
	}

.button .btn {
    position: relative;
    color: #fff;
    background: var(--main);
    display: inline-block;
    border: none;
    padding: 0px 40px 0px 40px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 5;
    display: inline-block;
    padding: 13px 32px;
    border-radius: 0px;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    border: 2px solid var(--main);
}

.button .btn::before {
    position: absolute;
    content: "";
    left: 70px;
    bottom: -81px;
    height: 30px;
    width: 30px;
    background: #092032;
    z-index: -1;
    border-radius: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    overflow: hidden;


}

.button .btn:hover:before {
    height: 240px;
    width: 270px;
    left: -40px;

}

.button .btn:hover {
    color: #fff !important;
    border: 2px solid #ff4d29;
}





.over-lay {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0px;
    padding: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    border-radius: 10px;
    transition: all 0.6s ease 0s;
    z-index: 0;
}



.overlay:hover .over-lay

	{
	
		opacity: 1;
		
	}

















.quote-item .quote-text {
  margin: 0 0 10px;
  display: inline-block;
  padding: 0 40px 30px 60px;
  background-color: #fff;
  position: relative;
  font-size: 16px;
  font-style: italic;
}

@media (max-width: 575px) {
  .quote-item .quote-text {
    padding: 0 40px 30px 50px;
  }
}

.quote-item .quote-text:before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-size: 30px;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--main);
}

.testimonial-slide .slick-dots {
  bottom: -35px;
}

img.testimonial-thumb {
  max-width: 80px;
  float: left;
  margin-right: 20px;
  border-radius: 5px;
}

.quote-item-info {
  padding-top: 15px;
  display: inline-block;
}

.quote-author {
  font-size: 16px;
  line-height: 18px;
  margin: 0 0 2px;
  font-weight: 700;
  display: block;
  color: var(--main2);
}

.quote-item-footer {
  margin-top: 0;
  margin-left: 60px;
}

@media (max-width: 575px) {
  .quote-item-footer {
    margin-left: 0;
  }
}

/* Testimonial Border */
.quote-item.quote-border .quote-text-border {
  border: 1px solid #000047;
  padding: 20px;
  position: relative;
  line-height: 28px;
  color: #666;
  font-size: 18px;
  text-align: center;
}

.quote-item.quote-border .quote-text-border:before {
  border: 12px solid;
  border-color: #e1e1e1 transparent transparent;
  border-top-color: #000047;
  bottom: -24px;
  position: absolute;
  content: "";
  display: block;
  height: 0;
  width: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
}

.quote-item.quote-border .quote-text-border:after {
  border: 12px solid;
  border-color: #fff transparent transparent;
  bottom: -22px;
  position: absolute;
  content: "";
  display: block;
  height: 0;
  width: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
}

.quote-item.quote-border .quote-item-footer {
  margin-left: 0;
  text-align: center;
  margin-top: 35px;
}

.quote-item.quote-border .quote-item-footer img.testimonial-thumb {
  float: none;
  margin: 0;
}

.quote-item.quote-border .quote-item-footer .quote-item-info {
  display: block;
}


.owl-theme .owl-dots .owl-dot span 

	{

		background: var(--main) !important;
	    
	}

.owl-theme .owl-dots .owl-dot.active span 

	{
	   background: var(--main2) !important;
	}

.owl-theme .owl-next i

	{
	    background: var(--main2) !important;
	   	padding: 10px !important;
	   	color: #fff !important;
	}

.owl-theme .owl-prev i

	{
	    background: var(--main2) !important;
	   	padding: 10px !important;
	   	color: #fff !important;
	}


.owl-prev,.owl-next 

	{
	  position: absolute;
	  top: 30%;
	  transform: translateY(-50%);
	}

.owl-prev 

	{
	  left: -1rem;
	}

.owl-next 

	{
	  right: -1rem;
	}

.contact-bg-section

	{
	
		background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url(../images/contact-bg.jpg) no-repeat;
    height: auto;
/*    padding: 50px;*/
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: 800;
	}

.img-contact-clr

	{
		background: #fff;
	}
.img-contact

	{
		padding: 45px 30px 59px;
/*    color: #fff;*/
    margin-top: 20px;
    
    margin: 0px auto;
    overflow: hidden;


	}

.img-contact

	{
		
		
	}

.contact-form

	{
		box-shadow: 0 0 30px 0 rgb(0 0 0 / 11%);
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;

  
    background-color: #fff;



    padding: 45px 30px 59px;
    color: #fff;
    margin-top: 20px;
    
    margin: 0px auto;
    overflow: hidden;

	}

.contact-form h3

	{
		color: var(--main);
	}
.contact-btn {
    z-index: 11;
/*    background-image: linear-gradient(90deg,var(--main),var(--main2));*/
	background: var(--main);
    color: #fff;
    text-decoration: none;
    white-space: normal;
    transition: all 0.6s ease 0s;
    text-align: center;
    line-height: 20px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 24px;
    border-radius: 4px;
    transform: translateY(5px);
    border: none;
    outline: none;
}



.contact-btn:hover 

	{
		box-shadow: 0px 11px 14px -7px rgb(0 0 0 / 25%) !important;
    	transform: translateY(-3px);
    	color: #fff;
    	background: var(--main2);
    	
   
	}
.feature-box

	{
		
		margin-top: 20px;
		
		height: auto;

		border: 1px solid red;
		border-radius: 20px;

		padding: 20px;
		background: #fff;

		border: 1px solid #e9ecef;

		box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
		cursor: pointer;

		transition: all 0.6s ease 0s;
	}


.feature-box:hover

	{
		
		
		background: var(--main2);

		color: #fff;
	}

.feature-box:hover h6

	{
		
		
		

		color: #fff;
	}

.feature-box:hover p

	{
		
		
		

		color: #fff;
	}

.feature-box:hover i

	{
		
		background: #fff;
		color: var(--main);
	}

.feature-box h6

	{
		line-height: 1.3;
	    letter-spacing: 0.1px;
	    color: var(--main);
	    font-weight: 600;
	    margin-bottom: 10px;
	    text-align: left;

	}

.feature-box p

	{
		line-height: 1.8;
	    letter-spacing: 0px;
	    text-align: left;
	    color: #000;
	    font-weight: 400;
	}




.botom-2-area p


	{
		
   	 	font-size: 15px;
   
	}

.botom-2-area i


	{
		
		
		background: var(--main);
		height: 60px;
		width: 60px;
		font-size: 35px;
			line-height: 1.8;
		align-self: center;
		align-items: center;
		justify-content: center;
		color: #fff;
		
		border-radius: 50%;
		margin-bottom: 20px;
	}


.botom-2-area-data

	{
		margin-left: 20px;
	}


	/*Footer*/

.footer

	{
		 background-image: linear-gradient(135deg, var(--main2) 0%, var(--main2) 100%);
		position: relative;
		padding: 130px 0px 30px 0px;
		color: #fff;
		z-index: 0;
		
	}

.footer .custom-shape-divider-top-1667824810 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.footer .custom-shape-divider-top-1667824810 svg {
    position: relative;
    display: block;
    width: calc(103% + 1.3px);
    height: 89px;
    transform: rotateY(180deg);
}

.footer .custom-shape-divider-top-1667824810 .shape-fill {
    fill: #FFFFFF;
}

.footer a

	{
		color: #fff;
	}

/*.footer-box h4

	{
		color: var(--main);
	}*/

.footer-box,
.footer-social-links-box 

	{
		
		padding: 20px;
	}

.footer-box a

	{
		transition: all 500ms ease-out;


	}


.footer-link a::before

	{
		
	    left: 22px;
	    top: 22px;
	    content: "\276F";
	    color: #fff;
	    /*border: 4px solid #eee;
	    border-radius: 50%;
	    background: #0580C4;
	    height: 32px;*/
	    text-align: center;
	    font-size: 15px;
	    width: 30px;
	    transition: all 500ms ease-in-out;
		
	
	}
.footer-box a:hover

	{	

		padding-left: 5px;

		

	}

.footer .icon

	{
		
			transition: 0.5s all;
			
			
	}

.icon i

	{
		color: #fff !important;
		font-size: 16px;

	}


.icon:hover i

	{
		
		color: #000 !important;
	}


.fb

	{
		background: #4267B2 !important;
		color: #fff !important;
	}

.ins

	{
		background: #8a3ab9;
		color: #fff !important;
	}


.ins:hover i

	{
		
		color: #8a3ab9;
	}

.fb:hover i

	{
		
		color: #fff !important;
	}

.tw

	{
		background: #00A7E7 !important;
		color: #fff;
	}


.tw:hover i

	{
		
		color: #fff !important;
	
	}

.yt

	{
		background: #FF0000 !important;
		color: #fff !important;
	}


.yt:hover i

	{
		
		color: #fff !important;
	}

.ins

	{
		background: #8a3ab9 !important;
		color: #fff !important;
	}


.ins:hover i

	{
		
		color: #fff !important;
	}

.linkd

	{
		background: #0077B4 !important;
		color: #fff !important;
	}


.linkd:hover i

	{
		
		color: #fff !important;
	}
	

.footer .icon:hover

	{
			
			
			transform:rotate(-360deg) !important;
		
	}



.contact-data h6

	{
		color: var(--main);
		font-weight: 700;
	}

.contact-data h4

	{
		color: #000;
	}

.quick-contact-item .text

	{
		color: #000;
		font-weight: 700;
	}

.contact-box h1

	{
		font-size: 29px;
		font-weight: 700;
		line-height: 44px;
	}

.contact-break

	{
		display: block;
	}


.contact-data i

	{
		background: var(--main);
		padding: 20px;
		border-radius: 50%;
		color: #fff;
		display: inline-block;

	}



.news-box

	{
		border-radius: 3px;
    	overflow: hidden;
    	box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%);
    background-color: #ffffff;
    position: relative;
    margin-bottom: 30px;
        transition: 0.4s;
	}

.news-box img

	{
		border-radius: 3px;
	}


.blog-single-data

	{
		    padding: 20px 25px;
	}

.blog-single-data span

	{
		color: #696969;
    	font-size: 14px;
    	line-height: 26px;
	}




.blog-single-data h5

	{
		color: var(--main);
    	
	}


.blog-img img 

	{
	    filter: brightness(100%);
	    opacity: 1;
	    display: block;
	    transition: .5s ease;
	    backface-visibility: hidden;
	    cursor: pointer!important;
	    width: 100%;
	    height: 230px;
	}


.blog-img img:hover {
        
        filter: brightness(40%);
}




.news-btn

	{
		z-index: 11;
   background-image: linear-gradient(90deg,var(--main),var(--main2));
    
    color: #fff;
    text-decoration: none;
    white-space: normal;
    
    
     transition: all 0.6s ease 0s;
    text-align: center;
    line-height: 21px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 34px;
    border-radius: 4px;
   transform: translateY(5px);

   	
   
	}

.news-btn:hover 

	{
		box-shadow: 0px 11px 14px -7px rgb(0 0 0 / 25%) !important;
    	transform: translateY(-3px);
    	color: #fff;
    	background-image: linear-gradient(90deg,var(--main2),var(--main));
    	
   
	}










.why-section

	{
		

		background: linear-gradient(169deg, rgba(254, 63, 64, 0.6), rgba(3, 164, 237, 0.6));

		background-attachment: fixed;
		padding: 40px 0px;
		margin-top: 40px;
		color: #fff;

	}

.why-box

	{
		
		
    	border-radius: 3px;
    	background: #000;

   
    	padding: 20px;
  
	}

.why-img-box img


	{
		  
	}

.icon-lg {
    width: 62px;
    height: 62px;
    font-size: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background: var(--main);
    margin-bottom: 10px;
}


.icon-lg i

	{
		color: #fff;
	}

.why-info

	{
		padding-left: 0.75rem;
    	flex-grow: 1;
    	color: #fff;
    	text-transform: uppercase;
	}

.about-list ul li 

	{
	    font: 400 16px/26px "Open Sans", sans-serif;

	    position: relative;
	    padding-left: 40px;
	    vertical-align: middle;
	    width: 50%;
	    display: inline-block;
	    margin-top: 12px;
	}


.about-list ul li img 

	{
	    position: absolute;
	    left: 0;
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	    transform: translateY(-50%);
	}
.about-list

	{

	}

.about-list ul li:nth-child(n+1) {
    float: left;
}


.services .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  margin-top: 30px;
}
.services .icon-box::before {
  content: "";
  position: absolute;
  background: var(--main);
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
}
.services .icon-box:hover::before {
  background: var(--main);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}
.services .icon {
  margin: 0 auto 20px auto;
  padding-top: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: var(--main);
  transition: all 0.3s ease-in-out;
}
.services .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}
.services .why-title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}
.services .why-title a {
  color: #111;
}
.services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}
.services .icon-box:hover .why-title a

	{
	  color: #fff;
	}

.services .icon-box:hover .description

	{
	  color: #fff;
	}
.services .icon-box:hover .icon {
  background: #fff;
}
.services .icon-box:hover .icon i {
  color: #000 !important;
}


.about-us-heading

	{
		color: var(--main);
	}


.about-us-section

	{
		padding: 70px 20px 70px 20px !important;
	}


.whatsapp-button

	{
		position: fixed;
		top: 500px;
		right: 90px;
		z-index: 999;
	}

.animated-btn

	{
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    line-height: 60px;
	    display: inline-block;
	    text-align: center;
	    background: #4fce5d;
	    position: absolute;
	    z-index: 1;
	    font-size: 25px;
	    float: left;
	}

.animated-btn::before, .animated-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: #4fce5d;
    animation: ripple-1 2s infinite ease-in-out;
    z-index: -1;
}

.animated-btn::after {
    background: #4fce5d;
    animation: ripple-2 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes ripple-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}