.elementor-2582 .elementor-element.elementor-element-4d66447 > .elementor-element-populated{padding:0px 250px 0px 250px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-2582 .elementor-element.elementor-element-4d66447{width:100%;}}/* Start custom CSS for html, class: .elementor-element-903f649 */.list-of-states {
  margin: 0;
  padding: 0;
  columns: 120px auto;
  column-gap: 8px;
  list-style: none;
  color: rgba(255, 255, 255, 0.83);
  font-family: "Montserrat", Sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
  
  margin-bottom: 0px;
}

.list-of-states a{
  color: #ffffff;
}


.list-of-states li {
  padding: 2px 4px;
  display: inline-block;
  width: 100%;
}
.list-of-states li.on {
  background: red;
  color: white;
  font-weight: bold;
}

.mapdiv{
 margin-top: -230px;
 margin-left: 0;
 margin-right: 0;
}

svg {
  display: block;
  
}

.mapdiv path{
  fill: #131313;
  stroke: #fac36e;
  stroke-width: 1px;
  transition: fill 0.3s;
}

.mapdiv :hover{
  fill: #fac36e;
}

    /* Estilo inicial del div */
    #my-div {
     
      background-color: lightgray;
      transition: background-color 0.3s ease; /* Opcional: para una transición suave */
    }

   
    .my-button:hover ~ .mapdiv #d27{
      fill: #fac36e;
      stroke: #fac36e;
 
    }
    
    .bot0:hover ~ .mapdiv #d27{
      fill: #fac36e;
      stroke: #fac36e;

    }

    /* Estilos básicos para el botón */
    .my-button {
      padding: 10px;
      border: 1px solid black;
      background-color: white;
    }
    
    .list-of-states li a:hover {
      color:#e49e56;
    }

    #div1 path {
      fill: #000000; 
      stroke: #fac36e;
      /* El nuevo color de 
      
      fondo del div */
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8296af5 */.list-of-states {
  margin: 0;
  padding: 0;
  columns: 120px auto;
  column-gap: 8px;
  list-style: none;
  color: rgba(255, 255, 255, 0.83);
  font-family: "Montserrat", Sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
  
  margin-bottom: 0px;
}

.list-of-states1 {
  margin: 0;
  padding: 0;
  columns: 120px auto;
  column-gap: 8px;
  list-style: none;
  color: rgba(255, 255, 255, 0.83);
  font-family: "Montserrat", Sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
  
  margin-bottom: 0px;
}

.list-of-states a{
  color: #ffffff;
}


.list-of-states li {
  padding: 2px 4px;
  display: inline-block;
  width: 100%;
}
.list-of-states li.on {
  background: red;
  color: white;
  font-weight: bold;
}

.mapdiv{
 margin-top: -230px;
 margin-left: 0;
 margin-right: 0;
}

svg {
  display: block;
  
}

.localidades{
  width: 100%;
}


.mapdiv path{
  fill: #131313;
  stroke: #fac36e;
  stroke-width: 1px;
  transition: fill 0.3s;
}

.mapdiv :hover{
  fill: #fac36e;
}

    /* Estilo inicial del div */
    #my-div {
     
      background-color: lightgray;
      transition: background-color 0.3s ease; /* Opcional: para una transición suave */
    }

   
    .my-button:hover ~ .mapdiv #d27{
      fill: #fac36e;
      stroke: #fac36e;
 
    }
    
    .bot0:hover ~ .mapdiv #l1{
      fill: #fac36e;
      stroke: #fac36e;
      

    }

    /* Estilos básicos para el botón */
    .my-button {
      padding: 10px;
      border: 1px solid black;
      background-color: white;
    }
    
    .list-of-states li a:hover {
      color:#e49e56;
    }

    #div1 path {
      fill: #000000; 
      stroke: #fac36e;
      /* El nuevo color de 
      
      fondo del div */
    }
    
    
    
#states *.on {
  fill: red;
}/* End custom CSS */