/*CSS of Calc btns*/

.amount__buttons {
  display: flex;
  text-align: center;
  padding: 20px;
}

.btn1 {
  background-color: white;
  border: 1px solid #000; /* Add a border to the buttons */
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 33%;/* Add transition effect for color change */
  box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.3);
  margin-right: 1px;
  margin-left: 1px;
}

.btn1:hover {
  background-color: #000; /* Change background color on hover */
  color: white; /* Change text color on hover */
}

.btn1.active {
  background-color: #000; /* Change background color when clicked */
  color: white; /* Change text color when clicked */
}

@media (max-width: 768px) {
  .btn1 {
    font-size: 13px;
    width: 40%;
  }
}






.item , figure {
  transition : all 225ms ease-out;
}

.item {
  float      : left;
  width      : 320px;
  height     : 130px;
  position   : relative;
  margin-top : 354px;
}

#howto figure {
  border-bottom : 4px solid #636b53;
}

div.handle {
  width    : 64px;
  height   : 40px;
  margin   : auto;
  position : relative;
  top      : -20px;
  font-weight: bold;
  font-size  : 30px;
  color      : #fff;
  background-color : #636b53;
}

div.handle:after {
  display  : block;
  content  : " ";
  position : absolute;
  bottom   : 100%;
  left     : 0;
  
  border-style : solid;
  border-color : transparent;
  border-bottom-color : #636b53;
  border-width : 0 32px 15px 32px;
}

div.handle:before {
  display  : block;
  content  : " ";
  position : absolute;
  top      : 100%;
  left     : 0;
  
  border-style : solid;
  border-color : transparent;
  border-top-color : #636b53;
  border-width : 15px 32px 0 32px;
}

.cover ul li {
  opacity    : 0;
  font-size  : 15px;
  margin-top : 10px;
  font-style : italic;
  list-style-type : none;
}

.item a {
  margin : auto;
  opacity: 0;
  color  : #fff;
  padding  : 10px;
  width    : 200px;
  display         : block;
  background-color: #8da956;
  text-decoration : none;
  font-size       : 15px;
  font-weight     : bold;
}

.item.ii a {
  background-color : #8da956;
}

.item.iii a {
  background-color : #8da956;
}

.item h2 {
  height   : 70px;
  position : absolute;
  bottom   : 0;
  left     : 0;
  width    : 100%;
  color    : #4e4e4d;
}

h2 > span {
  display : block;
  color   : #787876;
  font-size   : 13px;
  font-style  : italic;
  font-weight : normal;
}

.item:hover {
  cursor     : pointer;
  margin-top : 0;
  height     : 484px;
  transition : all 225ms;
  box-shadow : 0 0 5px 1px #aaa;
  background : #fff;
}

.item.active {

  margin-top : 0;
  height     : 484px;
  transition : all 225ms;
  box-shadow : 0 0 5px 1px #aaa;
  background : #fff;
}

.item.active ul{
  height : 100px;
}

.item:hover ul {
  height : 100px;
}


.item.active ul li{
  height : 100px;
  transition : all 225ms .222s;
  opacity : 1;
}

.item:hover ul li:first-child {
  transition : all 225ms .222s;
  opacity : 1;
}

.item:hover ul li:nth-child(2) {
  transition : all 225ms .299s;
  opacity : 1;
}

.item:hover ul li:last-child {
  transition : all 225ms .333s;
  opacity : 1;
}

.item:hover a {
  transition : all 225ms .7s;
  opacity  : 1;
}

.item.active a{
  transition : all 225ms .7s;
  opacity  : 1;
}

.item:hover figure {
  margin-top : 0;
  height     : 184px;
  transition : height 225ms;
}

.item.active figure{
  margin-top : 0;
  height     : 184px;
  transition : height 225ms;
}

.item:hover .handle {
  transition : height 225ms;
}

.item.active .handle{
  transition : height 225ms;
}

.item.i:hover h2 {
  color : #8da956;
  text-shadow : 0 1px 1px #636b53;
  transition : all 225ms .8s;
}

.item.i.active h2{
  color : #8da956;
  text-shadow : 0 1px 1px #636b53;
  transition : all 225ms .8s;
}

.item.ii:hover h2 {
  color : #8da956;
  text-shadow : 0 1px 1px #636b53;
  transition : all 225ms .8s;
}

.item.iii:hover h2 {
  color : #8da956;
  text-shadow : 0 1px 1px #636b53;
  transition : all 225ms .8s;
}

.cover:after , .cover:before {
  display: table ;
  content: " ";
  clear : both;
}

/* Add this media query to target smaller screens */
@media screen and (max-width: 600px) {

  .item {
    width      : 33%;
  }
  .item h2 span {
    display: none; /* Hide the longer description on smaller screens */
  }

  /* Set the shorter names for mobile screens */
  .item.i h2 {
    font-size: 18px; /* Adjust the font size if needed */
  }
  .item.ii h2 {
    font-size: 18px; /* Adjust the font size if needed */
  }

  .item.iii h2 {
    font-size: 18px; /* Adjust the font size if needed */
  }


  .item a {
    width    : 90%;
    margin-top: 20px;
  }

}

.item.ii figure {
  background-image: url('../images/howto_1bg.png'); /* Replace with the new image path */
  background-size: cover;
}

.item.iii figure {
  background-image: url('../images/howto_3bg.png'); /* Replace with the new image path */
  background-size: cover;
}

.item.i figure {
  background-image: url('../images/howto_bg.png'); /* Replace with the new image path */
  background-size: cover;
}

@media (max-width: 756px) {
  .item.ii figure {
    background-image: url('../images/howto_1.png'); /* Replace with the new image path */
    background-size: cover;
  }

  .item.iii figure {
    background-image: url('../images/howto_3.png'); /* Replace with the new image path */
    background-size: cover;
  }

  .item.i figure {
    background-image: url('../images/howto_nobg.png'); /* Replace with the new image path */
    background-size: cover;
  }
}