@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500;600;700&display=swap"); a.contact-card,
a:link.contact-card {
text-decoration: none;
color: none;
}
#main#whatsapp {
margin: 0 auto;
width: 980px;
float: none;
}
.maincont {
width: 95%; height: auto;
margin: 50px auto;
display: flex;
background-color: #fafafa;
-webkit-box-shadow: 5px 5px 10px 0px rgb(27 0 3 / 20%);
box-shadow: 5px 5px 10px 0px rgb(27 0 3 / 20%);
flex-direction: column;
}
.maincont .infobox {
width: 100%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.infobox .innerbox {
width: 90%;
height: 90%;
border: 2px solid #e10c23;
position: relative;
}
.innerbox .jcicon {
width: 70px;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/ws/logo.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -35px;
left: 0;
right: 0;
margin: auto;
}
.jcicon::after {
content: "";
display: block;
padding-bottom: 100%;
}
.maincont .btnbox {
width: 100%;
height: 20%; justify-content: center;
align-items: center;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/ws/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.kumabtn {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/ws/kuma_back.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100%; width: 60px;
height: 40px;
top: -79px;
bottom: 0;
margin: auto;
z-index: 1;
-webkit-filter: drop-shadow(0px 3px 3px rgba(34, 34, 34, 0.3));
filter: drop-shadow(0px 3px 3px rgba(34, 34, 34, 0.3));
}
.state { width: 73vw; height: auto;
display: flex;
margin: 20px auto 10px;
border-radius: 50px;
background: white;
justify-content: center;
align-items: center;
-webkit-box-shadow: 1px 2px 6px 3px rgb(27 0 3 / 20%);
box-shadow: 1px 2px 6px 3px rgb(27 0 3 / 20%);
cursor: pointer;
z-index: 2;
transition: 0.3s ease-in-out;
position: relative;
font-weight: bold;
}
.wsbutton { width: 73vw; height: auto;
display: flex;
margin: 10px auto;
border-radius: 50px;
background: white;
justify-content: center;
align-items: center;
-webkit-box-shadow: 1px 2px 6px 3px rgb(27 0 3 / 20%);
box-shadow: 1px 2px 6px 3px rgb(27 0 3 / 20%);
cursor: pointer;
z-index: 2;
transition: 0.3s ease-in-out;
position: relative;
}
.wsbutton .contact-card {
width: 100%;
height: 100%;
position: absolute;
}
.wsbutton .num {
width: 75%;
font-family: "Roboto", sans-serif;
font-weight: 700;
text-align: center;
font-size: 4vw;
letter-spacing: 1px;
color: #28a71a;
}
.wsbutton .icon {
width: 15%;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/ws/icon.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-color: #ffffff;
border-radius: 50%;
}
.icon::after {
content: "";
display: block;
padding-bottom: 100%;
}
.contact-card img {
width: 50px;
margin-right: 10px;
margin-top: 15px;
}
.img_container {
margin: 0 auto 60px;
text-align: center;
display: block;
}
.whats_box {
width: 100%;
display: flex;
padding: 15% 5%;
flex-direction: column;
height: 100%;
box-sizing: border-box;
justify-content: space-around;
font-size: 4vw;
line-height: 1;
font-family: "Roboto";
font-weight: 500;
}