.button{display: block; transition:all 100ms ease-in-out; background-color: var(--red); color: #fff; padding: 15px 60px; border-radius:60px; text-decoration: none; font-weight:700; text-align: center; position: relative; cursor: pointer; font-family: var(--font-heading); transition:all 300ms ease}
.button:hover{background: #000; color: #fff}


.backbutton{max-width: 200px; padding: 15px 10px 15px 30px; position: relative}
.backbutton::before {
    content: "\f04a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 14px;
	transition:all 300ms ease;
	position: absolute; top: 20px; left:25px
}
.backbutton:hover::before{
	transform:translate(-5px, 0);
}

.forwardbutton{max-width: 200px; padding: 15px 30px 15px 15px; position: relative}
.forwardbutton::after {
    content: "\f04e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

	transition:all 300ms ease;
	position: absolute; top: 20px; right:25px
}
.forwardbutton:hover::after{
	transform:translate(5px, 0);
}

.teambackbutton{margin: 0 auto}

.more-button{max-width: 160px; margin: 0 0 0 auto; position: relative; padding: 15px 35px 15px 20px; }
.more-button::after {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 14px;
	transition:all 300ms ease;
	position: absolute; top: 20px; right:8px
}
.more-button:hover::after{
	right:0;
}

.searchbutton{width:100%; max-width: 120px; padding: 10px 10px 10px 30px !important; position: relative; margin: 0 auto}
.searchbutton::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 16px;
    left: 15px;
    color: #fff;
	transform: scale(1);
	will-change: transform;
	overflow: visible;
}

.searchbutton:hover::before{
	transform:scale(1.4);
}


.new-search-button{width:100%; max-width: 270px; padding: 10px 10px 10px 30px !important; position: relative; margin: 0 auto}
.new-search-button::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 16px;
    left: 25px;
    color: #fff;
	transform: scale(1);
	will-change: transform;
	overflow: visible;
}
.new-search-button:hover::before{
	transform:scale(1.4);
}

.clear-shortlist-button{width:100%; max-width: 270px; padding: 10px 10px 10px 30px !important; position: relative; margin: 0 auto}
.clear-shortlist-button::before {
    content: "\f1b8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 16px;
    left: 25px;
    color: #fff;
	transform: scale(1);
	will-change: transform;
	overflow: visible;
}
.clear-shortlist-button:hover::before{
	transform:scale(1.4);
}

.email-button{width:100%; max-width: 230px; padding: 10px 10px 10px 30px !important; position: relative; margin: 0 auto}
.email-button::before {
    content: '\f0e0'; /* Unicode for the "at" symbol in Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 15px;
    left: 25px;
    color: #fff;
    transform: scale(1);
    will-change: transform;
    overflow: visible;
}

.email-button:hover::before{
	transform:scale(1.4);
}


.add-button{max-width: 200px; padding: 15px 10px 15px 30px; position: relative; margin: 0 0 0 auto}
.add-button::before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size:1.5rem;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 15px;
    left: 15px;
    color: #fff;
    transform: scale(1);
    will-change: transform;
    overflow: visible;
}
.add-button:hover::before{
	transform:scale(1.2) rotate(90deg);
}



.remove-button{max-width: 250px; padding: 15px 10px 15px 30px; position: relative; margin: 10px auto 0}
.remove-button::before {
    content: "\f2ed";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size:1.2rem;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 17px;
    left: 15px;
    color: #fff;
    transform: scale(1);
    will-change: transform;
    overflow: visible;
}
.remove-button:hover::before{
	transform:scale(1.2) rotate(110deg);
}
.voice-button{display:none}

.testimonial-button-wrap{position: absolute; left:0; bottom:30px; width:100%; text-align: center}
.testimonials-button{display: inline-block;  background-color: #fff !important; color: #000 !important; padding: 5px 30px!important; box-shadow:2px 2px 6px rgb(0,0,0,0.5)}
.testimonials-button:hover{background-color: #000 !important; color: #fff !important}


.blog-back-button{display: inline-block; margin: 30px auto 0; padding-left: 50px; padding-right: 25px}


#modal .button{color: #fff; padding:10px 25px; display: inline-block; margin: 5px 5px 5px 0; text-align: center; cursor:pointer; transition:all 300ms ease; text-decoration: none}
#modal .button:hover{background: #333}