*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

/* HTML */

html{
  overflow:auto;
  scroll-behavior:smooth;
}

/* BODY */

body{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  background:#D2042D;

  padding:20px;

  overflow-y:auto;
  overflow-x:hidden;
}

/* MAIN CONTAINER */

.container{
  width:100%;
  max-width:1400px;

  min-height:92vh;

  background:#ffffff;

  border-radius:40px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:60px;

  box-shadow:0 10px 40px rgba(0,0,0,0.08);

  overflow:auto;

  margin:auto;
}

/* LEFT SIDE */

.left{
  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;
}

/* IMAGE */

.left img{
  width:100%;
  max-width:380px;

  object-fit:contain;

  border:none;

  border-radius:30px;

  box-shadow:none;

  background:transparent;
}

/* RIGHT SIDE */

.right{
  flex:1;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:35px;
}

/* TITLE */

.title{
  color:#8B5E3C;

  font-size:32px;
  font-weight:700;
}

/* PIN BOXES */

.pin-display{
  display:flex;
  gap:14px;
}

/* PIN BOX */

.box{
  width:64px;
  height:64px;

  border:5px solid black;

  border-radius:16px;

  background:rgba(255, 255, 255, 0.859);

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:26px;
  font-weight:700;
}

/* KEYPAD */

.keypad{
  display:grid;

  grid-template-columns:repeat(3, auto);

  column-gap:55px;
  row-gap:55px;

  justify-content:center;
  align-items:center;

  margin-top:25px;
}

/* HEART BUTTON */

.heart{
  width:57px;
  height:57px;

  background:#D2042D;

  position:relative;

  transform:rotate(-45deg);

  display:flex;
  justify-content:center;
  align-items:center;

  cursor:pointer;

  transition:0.2s;
}

/* HEART SHAPE */

.heart::before,
.heart::after{
  content:"";

  position:absolute;

  width:57px;
  height:57px;

  background:#D2042D;

  border-radius:50%;
}

.heart::before{
  top:-28.5px;
  left:0;
}

.heart::after{
  top:0;
  left:28.5px;
}

/* HEART HOVER */

.heart:hover{
  transform:rotate(-45deg) scale(1.08);
}

/* HEART NUMBER */

.heart span{
  transform:rotate(45deg);

  color:#fffdfe;

  font-size:19px;
  font-weight:700;

  z-index:10;
}

/* TABLET */

@media(max-width:1000px){

  .container{
    flex-direction:column;

    justify-content:center;

    gap:40px;

    padding:40px 25px;
  }

  .left img{
    max-width:280px;
  }

}

/* MOBILE */

@media(max-width:600px){

  body{
    padding:18px;

    background:#D2042D;
  }

  .container{

    width:100%;

    min-height:100vh;

    padding:40px 28px;

    border-radius:38px;

    gap:38px;

    overflow-y:auto;

    justify-content:flex-start;
  }

  /* IMAGE */

  .left img{
    max-width:230px;

    border-radius:28px;
  }

  /* RIGHT SIDE */

  .right{
    gap:30px;
  }

  /* TITLE */

  .title{
    font-size:26px;

    text-align:center;
  }

  /* PIN BOXES */

  .pin-display{
    gap:12px;
  }

  .box{
    width:52px;
    height:52px;

    border-width:4px;

    border-radius:14px;
  }

  /* KEYPAD */

  .keypad{

    column-gap:38px;
    row-gap:38px;

    margin-top:10px;
  }

  /* HEARTS */

  .heart{
    width:48px;
    height:48px;
  }

  .heart::before,
  .heart::after{
    width:48px;
    height:48px;
  }

  .heart::before{
    top:-24px;
  }

  .heart::after{
    left:24px;
  }

  .heart span{
    font-size:16px;
  }

}