.map-container {
            position: relative;
            width: 90%;
            margin: auto;
            display: flex;
            justify-content: center;
          }

          .map {
            position: relative;
            width: 70%;
            max-width: 800px;
            margin: auto;
          }

          .map-contemnt {
            /* border: 4px solid red; */
            width: 50%;
            height: 70%;
          }

          .map img {
            width: 100%;
            height: auto;
            display: block;
          }

          .point {
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: #d72124;
            border-radius: 50%;
            border: 3px solid #ffffff;
            /* box-shadow: 0 0 15px rgba(44, 122, 123, 0.4); */
            animation: pulse 1.8s infinite;
            cursor: pointer;
            z-index: 10;
          }

          /* Point Animation */
          @keyframes pulse {
            0% {
              box-shadow: 0 0 0 0 rgba(198, 19, 19, 0.6);
            }

            70% {
              box-shadow: 0 0 0 20px rgba(61, 44, 143, 0);
            }

            100% {
              box-shadow: 0 0 0 0 rgba(61, 44, 143, 0);
            }
          }

          /* Tooltip Styling */
          .add_point {
            /* width: 250px; */
            /* box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); */
            border: none;
            position: absolute;
            display: inline-flex;
            /* flex-direction: column; */
            padding: 9.726px;
            justify-content: center;
            align-items: center;
            gap: 9.726px;

            z-index: 16;
            color: #fff;
            background: #000;
            transform-origin: top;
            transition: all 0.3s ease;
            visibility: hidden;
            opacity: 0;
            border-radius: 9.726px 0px;
            border: 1.945px solid #000;
            background: #000;
          }

          /* Tooltip Arrow */
          .add_point:before {
            display: block;
            width: 0;
            height: 0;
            content: "";
            border-right: 7px solid transparent;
            /* border-bottom: 8px solid #000; */
            border-left: 7px solid transparent;
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
          }

          .add_point h3 {
            /* font-weight: 500; */
            font-size: 17px;
          }

          .add_point > p {
            margin-bottom: 4px;
            font-size: 18px;
            color: #fff;
          }

          /* Tooltip positioning on hover */
          .point:hover + .add_point {
            visibility: visible;
            opacity: 1;
            transform: translateY(-10px);
          }

          /* Tooltip offset for each point */
          .point-1 + .add_point {
            top: 22%;
            left: 10.4%;
          }

          .point-2 + .add_point {
            top: 27%;
            left: 5%;
          }

          .point-3 + .add_point {
            top: 25%;
            left: 14.6%;
          }

          .point-4 + .add_point {
            top: 13%;
            left: 5.6%;
          }

          .point-5 + .add_point {
            top: 32%;
            left: 15.6%;
          }
          .point-6 + .add_point {
            top: 40%;
            left: 4.6%;
          }
          .point-7 + .add_point {
            top: 40%;
            left: 30.6%;
          }
          .point-8 + .add_point {
            top: 34%;
            left: 18.6%;
          }
          .point-9 + .add_point {
            top: 54%;
            left: 1.6%;
          }
          .point-10 + .add_point {
            top: 54%;
            left: 21.6%;
          }
          .point-11 + .add_point {
            top: 45%;
            left: 46.6%;
          }
          .point-12 + .add_point {
            top: 52%;
            left: 41.6%;
          }
          .point-13 + .add_point {
            top: 52%;
            left: 45.6%;
          }
          .point-14 + .add_point {
            top: 62%;
            left: 45.6%;
          }
          .point-15 + .add_point {
            top: 80%;
            left: 20.6%;
          }
          .point-16 + .add_point {
            top: 70.3%;
            left: 20.6%;
          }
          .point-17 + .add_point {
            top: 58.3%;
            left: 20.6%;
          }
          .point-18 + .add_point {
            top: 75.3%;
            left: 20.6%;
          }
          .point-19 + .add_point {
            top: 60.3%;
            left: 20.6%;
          }
          .point-20 + .add_point {
            top: 66.3%;
            left: 10.6%;
          }
          /* Responsive tweaks */
          @media screen and (max-width: 768px) {
            .add_point {
              width: auto;
              overflow: hidden;
            }

            .add_point:before {
              left: 50%;
            }
          }

          .map-contemnt h2 {
            color: #000;
            text-align: left;
            font-family: Poppins;
            font-size: 45px;
            font-style: normal;
            font-weight: 300;
            line-height: 120%;
            /* 54px */
          }

          .map-parent-container {
            overflow: hidden;
            background-image: url("./p-plastic-our-presence.png");
            background-size: cover;
            margin: auto;
            padding: 3%;
          }

          .map-contemnt p {
            color: #4d4d4d;
            font-family: Poppins;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 30px;
            /* 187.5% */
          }

          .count-map {
            display: flex;
            width: 90.265px;
            height: 88.257px;
            padding: 16.332px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8.166px;
            flex-shrink: 0;
            border-radius: 12.515px 0px;
            background: #000;
          }

          .parent-count-maps-2 .count-map {
            display: flex;
            width: 90.265px;
            height: 88.257px;
            padding: 16.332px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8.166px;
            flex-shrink: 0;
            border-radius: 12.515px 0px;
            background: #847cbc;
          }

          .parent-count-maps-3 .count-map {
            display: flex;
            width: 90.265px;
            height: 88.257px;
            padding: 16.332px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8.166px;
            flex-shrink: 0;
            border-radius: 12.515px 0px;
            border: 6px dashed #000;
            background: #fff;
          }

          .parent-count-maps-3 .count-map span {
            color: #000;
            text-align: center;
            font-family: Poppins;
            font-size: 50.66px;
            font-style: normal;
            font-weight: 700;
            line-height: 81.66px;
            /* 100% */
          }

          .parent-count-maps-2,
          .parent-count-maps-3,
          .parent-count-maps {
            display: flex;
            align-items: center;
          }

          .count-map span {
            color: #fff;
            text-align: center;
            font-family: Poppins;
            font-size: 50.66px;
            font-style: normal;
            font-weight: 700;
            line-height: 81.66px;
            /* 100% */
          }

          .count-content {
            display: flex;
            width: 219.085px;
            height: 62.029px;
            padding: 12.515px;
            justify-content: center;
            align-items: center;
            gap: 12.515px;
            flex-shrink: 0;
            border-radius: 0px 0px 12.515px 0px;
            background: #fff;
          }

          .count-content-2,
          .count-content p {
            color: #4d4d4d;
            text-align: center;
            font-family: Poppins;
            font-size: 19.476px;
            font-style: normal;
            font-weight: 700;
            line-height: 36.517px;
            /* 187.5% */
          }

          .count-content-2 p {
            color: #4d4d4d;
            text-align: center;
            font-family: Poppins;
            font-size: 20.476px;
            font-style: normal;
            font-weight: 700;
            line-height: 36.517px;
            /* 187.5% */
          }

          .count-content-2 {
            display: flex;
            width: 280.627px;
            height: 62.06px;
            padding: 12.515px;
            justify-content: center;
            align-items: center;
            gap: 12.515px;
            flex-shrink: 0;
            border-radius: 0px 0px 12.515px 0px;
            background: #fff;
          }

          .consumer-map {
            /* margin-top: 20px; */
            display: flex;
            flex-direction: column;
            gap: 20px;
          }

          .stripe-map {
            width: 100px;
            height: 10px;
            background-color: #000;
          }

          .stripe-map2 {
            width: 100px;
            height: 10px;
            background: #847cbc;
          }

          .stripe-map3 {
            width: 100px;
            height: 1px;
            /* background: #000; */
            border: 4px dashed #000;
          }

          .stripe-map4 {
            width: 100px;
            height: 1px;
            /* background: #000; */
            border: 4px dashed #847cbc;
          }

          .parent-stripe-map {
            display: flex;
            height: 30px;
            /* border: 4px solid; */
            align-items: center;
            gap: 15px;
          }

          .parent-stripe-map p {
            color: #4d4d4d;
            font-family: Poppins;
            font-size: 18.562px;
            font-style: normal;
            font-weight: 700;
            line-height: 29.178px;
            /* 187.5% */
          }

          .main-parent-stripe-map {
            /* margin-top: 80px; */
          }

          @media (max-width: 1024px) {
            .map-container {
              position: relative;
              width: 95%;
              height: auto !important;
              margin: auto;
              display: flex;
              flex-direction: column;
              justify-content: left !important;
              align-items: flex-start !important;
              padding-top: 20px;
            }

            .count-content-2 {
              width: 235.627px;
              height: 62.06px;
            }

            .map {
              width: 100%;
              margin-top: 10%;
            }

            .map-contemnt {
              /* border: 4px solid red; */
              width: 100%;
              height: 70%;
            }

            .map-contemnt h2 {
              font-size: 32px;
            }

            .map-contemnt p {
              font-size: 17px;
            }

            .parent-count-maps-3 .count-map {
              width: 78.265px;
              height: 78.257px;
              padding: 16.332px;
            }

            .parent-count-maps-2 .count-map {
              width: 78.265px;
              height: 78.257px;
            }

            .count-map {
              width: 78.265px;
              height: 78.257px;
            }

            .parent-stripe-map p {
              font-size: 12.562px;
            }

            .stripe-map2,
            .stripe-map4,
            .stripe-map3,
            .stripe-map {
              width: 47px;
            }

            .add_point:before {
              display: block;
              width: 0;
              height: 0;
              content: "";
              border-right: 7px solid transparent;
              border-bottom: none;
              border-left: 7px solid transparent;
              position: absolute;
              top: -8px;
              left: 50%;
              transform: translateX(-50%);
            }

            .add_point {
              width: auto;
            }
          }