#click-call-and-whatsapp-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blueviolet;
    background: var(--onclick);
    background-size: cover;
    transform: rotate(0deg);
    transition:all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);;
    cursor: pointer;
    z-index: 99;
}
@keyframes entry {
    0%{
        margin-left:-100px;
    }
    100%{
        margin-left: 0px;
    }
    
}
.btn-pulse::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	padding: 25px;
	border: 5px solid blueviolet;
	opacity: 0.75;
	animation-name: pulse-border;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@keyframes pulse-border {
	0% {
		padding: 25px;
		opacity: 0.75;
	}
	75% {
		padding: 50px;
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.whatsapp{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: green;
    background: var(--whatsapp);
    background-size: cover;
    transition:.3s ease-out;
    cursor: pointer;
    z-index: 98;
}
.call-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    background: var(--call);
    background-size: cover;
    transition: .3s ease-out;
    cursor: pointer;
    z-index: 97;
}
.form-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    background: var(--form);
    background-size: cover;
    transition: .3s ease-out;
    cursor: pointer;
    z-index: 97;
}
.call-btn:hover,.whatsapp:hover ,.form-btn:hover{
/* border: 1px solid black; */
box-shadow: 0px 0px 15px rgb(0 0 0 /30%),0px 0px 30px rgb(0 0 0 /30%);
transform: scale(1.05);
}
.callto ,.whatsto{
    display: none;
}
.call-btn:hover,.whatsapp:hover,.form-btn:hover{
    /* border: 1px solid black; */
    box-shadow: 0px 0px 15px rgb(0 0 0 /30%),0px 0px 30px rgb(0 0 0 /30%);
    transform: scale(1.05);
    }
    .call-btn:hover::before,.whatsapp:hover::before,.form-btn:hover::before{
     opacity: 1;
     visibility: visible;
    }
    .call-btn:hover::after,.whatsapp:hover::after,.form-btn:hover::after{
        opacity: 1;
        visibility: visible;
       }
    .call-btn::before  , .whatsapp::before, .form-btn::before{
    position: absolute;
    color: white;
    background-color: black;
    border-radius: 6px;
    padding: 5px;
    opacity: 0;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    transition: .3s;
    visibility: hidden;
    }
    .call-btn::before {
        content:"CALL";
        top:-32px;
        padding: 2px;
        width: 60px;
        text-align: center;
    }
    .whatsapp::before {
        content:"WHATSAPP";
        left: 60px;
        padding: 2px;
        width: 100px;
        text-align: center;
    }
    .form-btn::before {
        content:"GET A QUOTE";
        left: 60px;
        padding: 2px;
        width: 120px;
       display: grid;
       place-items: center;
    }
    .form-box{
        position: fixed;
        display: flex;
        top: 100%;
        justify-content: center;
        align-items: center;
        padding-top: 100px;
        width: 100vw;
        height: 100vh;
        background-color:rgba(255, 255, 255, 1);
        transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        cursor: pointer;
        overflow-y: scroll;
        z-index: 999999;
    }
    .form-box::before{
        content:"";
        position: absolute;
        top:20px;
        left: 20px;
        padding: 2px;
        width: 25px;
        height: 25px;
        background-image: var(--back);
        background-size: cover;
    }
    .form-box::after{
        content:"BACK";
        display: grid;
        color: red;
        font-weight: 700;
        place-items: center;
        position: absolute;
        top:20px;
        left: 55px;
        padding: 2px;
        width: 25px;
        height: 25px;
    }
    @media only screen and (max-width: 600px) {
        .form-box {
            padding-top: 50px;
        }
      }