@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

#whatsappicon{position:fixed; bottom:1VW; left:1VW;}

#whiteicon{
width:4vw;
height:4vw;
border-radius:50%;
background-color:#3ac371;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#white{
	width:4.8vw;
	height:4.8vw;
	background-color:#fff;
	box-shadow:2px 2px 3px 2px rgba(0,0,0,0.3);
	position:relative;
	top:1%;
	left:1%;
	border-radius:50%;
	
}
#white::before{
	content:'';
	position:absolute;
	border:1.5vw solid;
	border-color:transparent #fff transparent transparent;
	top:3.5vw;
	left:-1.5vw;
	transform:rotate(-50deg) rotateX(-55deg);
}
#white::after{
	content:'';
	position:absolute;
	border:.9vw solid;
	border-color:transparent #3ac371 transparent transparent;
	top:3.5vw;
	left:-.29vw;
	transform:rotate(-50deg) rotateX(-55deg);
}
.whiteiconfont{position:absolute;
top:0vw; left:1vw; font-size:3vw; color:white; z-index:}

.whiteiconfont:hover{position:absolute; cursor:pointer;
top:0vw; left:1vw; font-size:4vw; color:yellow; z-index:}


@media screen and (max-width:600px){
#whatsappicon{position:fixed; bottom:9VW; left:4VW;}
#whiteicon{
width:15vw;
height:15vw;
border-radius:50%;
background-color:#3ac371;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#white{
	width:17.5vw;
	height:17.5vw;
	background-color:#fff;
	box-shadow:2px 2px 3px 2px rgba(0,0,0,0.3);
	position:relative;
	top:1%;
	left:1%;
	border-radius:50%;
	
}


#white::before{
	content:'';
	position:absolute;
	border:10vw solid;
	border-color:transparent #fff transparent transparent;
	top:8vw;
	left:-10vw;
	transform:rotate(-50deg) rotateX(-55deg);
}
#white::after{
	content:'';
	position:absolute;
	border:5vw solid;
	border-color:transparent #3ac371 transparent transparent;
	top:11.5vw;
	left:-3.5vw;
	transform:rotate(-50deg) rotateX(-55deg);
}

.whiteiconfont{position:absolute;
top:-1vw; left:4vw; font-size:12vw; color:white; z-index:}

.whiteiconfont:hover{position:absolute;
top:-1vw; left:4vw; font-size:10vw; color:white; z-index:}
	
}