@media (min-width: 769px) and (max-width: 992px) {
     
    html, body {
      height: 100%;
      width:100%;
      margin: 0;
      font-family: Arial, sans-serif;
      overflow-x: hidden;
    }

    .map-title {
      font-size: 28px;
      top: 25px;
    }
  
    .custom-controls {
      width: 320px;
      height: 650px;
      border-radius: 15px;
      border: 4px solid rgba(255, 255, 255, 0.50);
    }
    .controls-header {
      padding: 20px;
    }
    .controls-body {
      padding: 20px;
    }
  
    .controls-body label {
      font-size: 14px;
    }
    .controls-body select,
    .controls-body input {
      font-size: 12px;
      padding: 6px;
    }
  
    #plotBtn {
      padding: 8px 12px;
      font-size: 11px;
    }
  
    .map-arrows button {
      width: 55px;
      height: 55px;
    }
    .map-arrows img {
      width: 28px;
      height: 32px;
    }
    
    .map-zoom button {
      width: 45px;
      height: 45px;
    }
    .map-zoom img {
      width: 22px;
      height: 20px;
    }
  
    footer.site-footer {
      height: 60px;
      font-size: 12px;
    }
    .map-footer__left,
    .map-footer__right {
      font-size: 9px;
    }
    .map-footer__icon {
      width: 20px;
      height: 20px;
    }

    .map-footer__org{
      font-weight: 600;
      font-size: 9px;
      width:250px;
    }
  
    #langSwitch {
      font-size: 12px;
      padding: 3px 24px 3px 8px;
      background-size: 16px;
    }

    .lang-toggle {
      position: absolute;
      top: 115px;
      right: 30px;
      z-index: 3500;
    }

    .gm-fullscreen-control {
      top: 60px !important;  
      right: 35px !important; 
      background-color: transparent !important; 
      width: 35px !important;
      height: 35px !important;
      cursor: pointer !important;
      border: none !important;
      color: #ffffff !important;
    }
    
    .gm-fullscreen-control img {
      width: 30px !important;
      height: 27px !important;
      margin: auto;
      filter: brightness(0) invert(1) !important;
    }

    .map-zoom{
      right: 30px;
      bottom: 160px;
      gap: 20px;
    }

    .custom-controls.active + .arrow-btn {
      left: 375px;
    }

    #latInput, #lngInput {
      width: 93%;
    }
  }