#branch {
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      
      .slider-container{
        width: 600px;
        height: 400px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
      }
      
      
      .container{
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        position: relative;
        display: flex;
        transition: transform 0.5s ease-in-out;
      }
      
      .map-container{
        width: 100%;
        height: 100%;
        display: none;
      }
      
      .map-container.active{
        display: block;
      }
      
      .slideshow-controls{
        position: absolute;
        top: 50%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
      }
      
      .slideshow-controls button{
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background-color: #4CAF50;
        color: white;
        transition: background-color 0.3s ease-in-out;
      }
      
      .slideshow-controls button:hover{
        background-color: #45a049;
      }
      
      .radio-controls{
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }
      
      input[type="radio"]{
        display: none;
      }
      
      .radio-label{
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #ddd;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
      }
      
      input[type="radio"]:checked + .radio-label{
        background-color: #4CAF50;
      }
}