/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FF676D;
  padding: 0 20px;
}
.box{
  display: flex;
  align-items: center;
  background: #fff;
  /* box-shadow: 0 5px 10px rgba(0,0,0,0.2); */
  padding: 20px 15px;
  border-radius: 6px;
  /* transform: scale(1.5); */
}
.box .icon{
  position: relative;
  height: 65px;
  width: 65px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 6px;
  cursor: pointer;
  margin: 0 8px;
  transition: all 0.3s ease;
}
.box .icon.active{
  background: #FF676D;
}
.box .icon.line.active{
  background: #FFF;
}
.icon i{
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #333;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: all 0.3s ease;
}
.icon.active i{
  color: #fff;
}
.icon.line.active i{
  color: #333;
}
 .icon i.close{
  opacity: 0;
}
 .icon.active i.close{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.active i.open{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.line.active i.close{
  transform: translate(-50%, -50%) rotate(0deg);
}
 .icon.line.active i.open{
  transform: translate(-50%, -50%) rotate(0deg);
}



































































































































































/*  */