.map-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }

      .map-svg {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        max-width: 1125px;
      }

      .region path {
        fill: #0e3a43;
        stroke: white;
        stroke-width: 0.38;
        cursor: pointer;
        transition: fill 0.2s ease;
      }

      .region:hover path,
      .region.active path {
        fill: #25b0c1;
      }

      #regionSelect {
        appearance: none;
        background: url("images/Polygon2.svg") no-repeat right 12px center;
        background-size: 16px;
        padding-right: 40px;
        margin-bottom: 10px;
      }

      @media (max-width: 768px) {
       

        .map-container {
          padding: 10px;
          margin: 0 -5px;
        }

        .map-controls {
          display: flex;
          flex-direction: column;
          margin-top: 15px;
          gap: 10px;
          margin-bottom: 15px;
        }

        .mselect,
        .mbutton {
          padding: 12px 16px;
          font-size: 16px;
          border-radius: 8px;
          border: 1px solid #ccc;
          width: 100%;
        }

        .mbutton {
          background: #25b0c1;
          border: none;
          font-weight: 600;
          color: #0e3b43;
          cursor: pointer;
          transition: background 0.2s ease;
        }

        .mbutton:disabled {
          background: #cccccc;
          cursor: not-allowed;
          color: #gray;
        }
       
        .region path {
          pointer-events: none; 
          cursor: default; 
        }

        .region:hover path{
          fill: #0e3a43 !important; 
        }
      }

      @media (min-width: 769px) {
        .map-controls {
          display: none;
        }
      }

      @media (max-width: 480px) {

        .mselect,
        .mbutton {
          padding: 10px 14px;
          font-size: 15px;
        }
      }