.advertisements {
  margin-top: 70px;
    width: 100%;
    overflow: hidden;
    background-image:url(ad.png);
    padding: 14px 0 0 0;
    /* border-top: 2px solid #222;
    border-bottom: 2px solid #222; */
    margin-bottom:-82px ;
    padding: 30px;
  }
  
  .ad-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: subwayAds 40s linear infinite;
  }
  
  .ad {


      flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.25);
    transition: transform 0.3s ease;
    border: rgb(255, 255, 255) 1px solid;
  }
  
  .ad:hover {
    transform: scale(1.05);
  }
  
  /* different subway-ad sizes */
  
  .square {
    width: 120px;
    height: 120px;
  }
  
  .rectangle {
    width: 180px;
    height: 120px;
  }
  
  .wide {
    width: 240px;
    height: 90px;
  }
  
  @keyframes subwayAds {
    from {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(-50%);
    }
  }
/* MOBILE AD STRIP */

@media (max-width: 768px) {

    .advertisements {
      /* margin-top: 70px; */
      margin-bottom: -10px;
      padding: 10px 0 0 0;
      background-size: cover;
      background-position: center;
    }
  
    .ad-track {
      gap: 10px;
      animation: subwayAds 22s linear infinite;
    }
  
    .ad {
      border-radius: 6px;
    }
  
    /* SMALLER ADS */
  
    .square {
      width: 70px;
      height: 70px;
    }
  
    .rectangle {
      width: 110px;
      height: 70px;
    }
  
    .wide {
      width: 150px;
      height: 70px;
    }
  
  }
  .subway-scene {
    position: relative;
    width: 100%;
  }
  
  .subway-image {
    width: 100%;
    display: block;
    margin-bottom: 0px;
  }
  
  /* ALL CLICKABLE AREAS */
  
  .hotspot {
    position: absolute;
    text-decoration: none;
    color: white;
    background: rgba(0, 42, 255, 0.15);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
    transition: 0.3s;
  }
  
  .hotspot:hover {
    /* background: #111; */
    transform: scale(1.05);
  }
  
  /* LEFT MAP */
  
  .map-link {
    top: 15%;
    left: 10%;
    padding: 152px 130px;
    border-radius: 1px;
  
    background-image: url("subway-map.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* Center */
  .fav-space {
    color: white;
    top: 25%;
    right: 36.5%;
    padding: 30px 195px;
    border-radius: 5px;
    background-image: url("share.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

  }
  
  
  /* RIGHT POEM */
  
  .poem-link {
    top: 23%;
    right: 10%;
    padding: 102px 125px;
    border-radius: 5px;

  }
  
  /* SEAT LINKS */
  
  .seat1 {
    bottom: 13.5%;
    left: 4%;
    padding: 75px 75px;
    border-radius: 100px;
  }
  
  .seat2 {
    bottom: 13%;
    left: 16.5%;
    padding: 72px 72px;
    border-radius: 100px;
  }
  
  .seat3 {
    bottom: 13%;
    left: 28%;
    padding: 70px 70px;
    border-radius: 100px;
  }
  
  .seat4 {
    bottom: 13%;
    left: 40%;
    padding: 72px 72px;
    border-radius: 100px;
  }

  .seat5 {
    bottom: 14.5%;
    left: 52.5%;
    padding: 60px 62px;
    border-radius: 100px;
  }
  
  .seat6 {
    bottom: 13%;
    left: 62.5%;
    padding: 72px 72px;
    border-radius: 100px;
  }
  
  .seat7 {
    bottom: 13%;
    left: 73.5%;
    padding: 73px 72px;
    border-radius: 100px;
  }

  .seat8 {
    bottom: 13%;
    left: 84.5%;
    padding: 72px 72px;
    border-radius: 100px;
  }


  /* MOBILE VIEW */
  @media (max-width: 768px) {

    .subway-scene {
      width: 100%;
      overflow: hidden;
    }
  
    .subway-image {
      width: 100%;
      height: auto;
      display: block;
    }
  
    /* ALL HOTSPOTS */
  
    .hotspot {
      position: absolute;
      padding: 4px 6px;
      font-size: 10px;
      border-radius: 999px;
    }
  
    /* LEFT MAP */
  
    .map-link {
      top: 16%;
      left: 10%;
      padding: 55px 48px;
  
      background-size: cover;
      background-position: center;
      border-radius: 2px;
    }
  
    /* CENTER SHARE AREA */
  
    .fav-space {
      top: 24%;
      right: 38%;
      padding: 12px 62px;
      background-size: cover;
      background-position: center;
      border-radius: 3px;
    }
  
    /* RIGHT POEM */
  
    .poem-link {
      top: 23%;
      right: 10%;
      padding: 40px 48px;
      border-radius: 3px;
    }
  
    /* SEATS */
  
    .seat1 {
      bottom: 13%;
      left: 4%;
      padding: 28px 28px;
    }
  
    .seat2 {
      bottom: 12%;
      left: 16%;
      padding: 28px 28px;
    }
  
    .seat3 {
      bottom: 13%;
      left: 28%;
      padding: 26px 28px;
    }
  
    .seat4 {
      bottom: 11%;
      left: 40%;
      padding: 29px 28px;
    }
  
    .seat5 {
      bottom: 12%;
      left: 52%;
      padding: 26px 26px;
    }
  
    .seat6 {
      bottom: 12%;
      left: 62%;
      padding: 30px 30px;
    }
  
    .seat7 {
      bottom: 11%;
      left: 73%;
      padding: 30px 30px;
    }
  
  }