.page_404 {
      padding: 40px 0;
      background: #fff;
      font-family: 'Arvo', serif;
    }

@font-face {
      font-family: 'Arvo';
      src: url('../fonts/Arvo-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

@font-face {
      font-family: 'Arvo';
      src: url('../fonts/Arvo-Italic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

@font-face {
      font-family: 'Arvo';
      src: url('../fonts/Arvo-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

@font-face {
      font-family: 'Arvo';
      src: url('../fonts/Arvo-BoldItalic.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    .page_404 img {
      width: 100%;
    }

    .four_zero_four_bg {
      background-image: url(../anim/man_getting_shoked.gif);
      height: 400px;
      background-position: center;
    }

    /* Mobile First Layout (Default) */
    .four_zero_four_bg h1 {
      font-size: 3.5rem;
    }

    .four_zero_four_bg h1 {
      font-weight: 700;
    }

    h1 {
      font-size: 2rem;
      /* 32px */
    }

    /* Tablets and Up */
    @media (min-width: 768px) {
      .four_zero_four_bg h1 {
        font-size: 6rem;
      }

      .h2, h2 {
        font-size: xx-large;
      }
    }

    /* Desktops and Up */
    @media (min-width: 1024px) {
      .four_zero_four_bg h1 {
        font-size: 8rem;
      }

      .h2, h2 {
        font-size: xxx-large;
      }
    }

    .four_zero_four_bg h3 {
      font-size: 80px;
    }

    .link_404 {
      color: #fff !important;
      padding: 10px 20px;
      background: #39ac31;
      margin: 20px 0;
      display: inline-block;
    }

    .contant_box_404 {
      margin-top: -50px;
    }

    .h2, h2 {
      font-weight: 600;
      color: #fb7175;
    }