/* FINAL FOOTER – SMALLER GAP BETWEEN LOCATION / WEBSITE / SOCIAL ON TABLET */
  .footer-new {
    background-color: #222222;
    color: #999999;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 60px 20px 50px;
    text-align: center;
  }

  .footer-new h3 {
    color: #FFF;
    font-family: 'Bubblegum Sans', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 21px;
    margin-bottom: 45px; /* STAY CONNECTED */
    position: relative;
  }

  .footer-new h3::after {
    content: "";
    position: absolute;
    bottom: -20px; /* line under stay connected */
    left: 50%;
    transform: translateX(-50%);
    width: 63px;
    height: 3px;
    background-color: #FFF;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;                    /* default gap (mobile & desktop) */
    max-width: 1200px;
    margin: 0 auto;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer-col a {
    text-decoration: none;
    color: #999;
  }
  .footer-col-logo img#logo {
    height: 74px;
    margin-bottom: 1px;
  }

  .footer-col-logo .copy-right {
    margin-top: 1px;
    font-size: 14px;
  }

  .social-new {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;            /* slightly reduced from 20px */
    display: flex;
    gap: 20px;
  }

  .social-new a {
    color: #999;
    font-size: 20px;
    transition: color .3s;
  }

  .social-new a:hover { color: #FFF; }

  .made-by {
    margin-top: 1px;
    font-size: 14px;
  }

  .fa-heart {
    color: rgba(46,118,252);
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }

  /* TABLET: 2 columns + smaller vertical spacing on the right side only */
  @media (min-width: 768px) and (max-width: 991px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 1px 50px;             /* horizontal gap a bit bigger, vertical stays default */
    }

    /* Right-side items stacked in column 2 with reduced spacing */
    .footer-col:nth-child(2),   /* Location */
    .footer-col:nth-child(3),   /* Website */
    .footer-col:nth-child(4) { /* Social */
      grid-column: 2;
      margin-bottom: 1px;      /* much tighter spacing between them */
    }

    /* Remove the bottom margin from the very last item (social) */
    .footer-col:nth-child(4) {
      margin-bottom: 0;
    }
  }

  /* DESKTOP: 4 equal columns – full spacing */
  @media (min-width: 992px) {
    .footer-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;                     /* back to normal gap */
    }
  }