.hide-whwn-mobile {
  display: none;
}

.show-whwn-mobile {
  display: block;
}

.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
}

.fa-bars:hover {
  color: cyan;
}

.fa-plus:hover {
  color: cyan;
}

input {
  display: none;
}

.fa-bars {
  font-size: 30px;
  transform: scaleX(1.2);
}

.fa-plus {
  position: absolute;
  right: 10vw;
}

/* this codes clicked */

#burger:checked + .show-on-click {
  display: block;
}

.h10,
.h11,
.h12 {
  font-size: 22px;
  display: block;
  padding: 20px;
}


.h10:hover {
  letter-spacing: 1px;
  color: cyan;
}

.h11:hover {
  letter-spacing: 1px;
  color: cyan;
}

.h12:hover {
  color: cyan;
  letter-spacing: 1px;
}

.show-on-click {
  display: none;
}

.sub-div {
  display: none;
  z-index: 999;
}

.sub-div li a {
  color: black;
  z-index: 999;
}

#pass:checked + .sub-div {
  display: block;
}

#pass1:checked + .sub-div {
  display: block;
}

#pass2:checked + .sub-div {
  display: block;
}

.a11 {
  font-size: 20px;
  margin-left: 20px;
}

.bot {
  font-size: 20px;
  margin-left: 20px;
}

.a10 {
  font-size: 20px;
  margin-left: 20px;
}

.show-on-click {
  border-bottom: 2px solid black;
}

.pc {
  display: none;
}

.mobile {
  display: block;
}

.themephone{
  background: #f0f0f0;
}

.themephone h2 {
  color: black;
  position: relative;
  top: 250px;
  left: 35px;
}

.themephone p {
  color: black;
  position: relative;
  top: 250px;
  left: 31px;
}

.chome {
  position: relative;
  display: flex;
}

.y1 {
  position: relative;
  margin-left: 10px;
  color: white;
  background-color: black;
  padding: 10px;
  border-radius: 10px;
  top: 288px;
  left: 61px;
}

.y2 {
  position: relative;
  margin-left: 10px;
  color: white;
  background-color: black;
  padding: 10px;
  border-radius: 10px;
  top: 288px;
  left: 63px;
}