@media (max-width: 768px) {

    html, body {
        height: 100%;
        width:100%;
        margin: 0;
        font-family: Arial, sans-serif;
        max-width: 100%;
        overflow-x: hidden;
       
      }

    #map {
      position: relative;
      width: 100%;
      height: 79vh; 
    }

    .control-wrapper {
        display: block;
        height:0;
        width:100%;
    }

    .header-placeholder {
      position: relative;
      z-index: 2000;
      background: #012C6C;
      width: 100%;
      height: 130px;
    }

    .hamburger-btn {
      display: block;
      background: transparent;
      border: none;
      position: absolute;
      left: 5px;
      top: 9px;
    }
  
    .hamburger-btn img {
      width: 24px;
      height: 19px;
    }
  
    .map-title {      
      top:0;
      bottom:0;
      left:0;
      right:0;
      width:295px;
      z-index: 4000;
      display:flex;
      align-items: center;
      gap: 14px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      color: #fff;
      text-align: center;
      font-style: normal;
      line-height: normal;
      font-weight: 600;
      font-size: 20px;
      pointer-events: none;
      margin: auto;
      position: absolute;
      padding-top:25px;
      
    }

    button#toggleArrow {
      display: none;
    }
    
    .close-btn {
      display:block;
    }
  
    .custom-controls {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      border: none;
      border-radius: 0;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
      z-index: 5000;
    }
  
    .custom-controls.active {
      transform: translateX(0);
    }
  
    .custom-controls::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100vh;
      background: rgba(0,0,0,0.5);
      z-index: -1; 
    }
  
    footer.site-footer {
      position: relative;
      width: 100%;
      height: 210px;
      background: #fff;
      padding: 20px 10px;
    }
  
    .map-footer__inner {    
      width: 100%;
      max-width: none;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      flex-direction: column;
      top:10%;
      background:#fff;
      position: absolute;
    }

    .map-footer__left {      
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        color: #0b2349; 
        line-height: normal;
        position:absolute;
        padding: 10px 10px;
        align-items: center;
        text-align: center;
        z-index: 3000;
        margin-top: 0%;

      }

    .map-footer__right {     
        display: flex;
        align-items: center;
        gap: 20px;
        color: #0b2349; 
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        flex-direction: column;
        position:absolute;
        background:transparent;
        margin-top: 45px;
    
    }  

    .map-footer__org{       
        font-weight:600 px;
        color:#012C6C;
        top:30%;
        margin-bottom: 13px;
        font-size:12px;
    }
  
    .map-footer__item {         
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color:#012C6C;
      background: transparent;
    }
  
    .map-footer__icon {      
        width: 24px;
        height: 24px;
        object-fit: contain;
        filter: brightness(0) invert(1);
        color: #012C6C;
    }

    .map-footer__icon{
        display:none;
    }

    .map-footer__icon__blue{
        display:block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .map-footer a {
        color: #012C6C;
        text-decoration: none;
    }

    .map-arrows {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: unset;
      display:flex;
      justify-content: center;
      align-items:center;
      z-index: 4000;
      flex-direction: row;
      gap: 0px;
      width:100%;
      background:#012C6C;
      transform:unset;
    }

    .map-arrows img {
      width: 28px;
      height: 28px;
    }
  
    .map-zoom {
      position: absolute;
      right: 10px;
      bottom: 155px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 4000;
    }
    
    .map-zoom img {
      width: 20px;
      height: 20px;
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
    }
    .close-btn img {
      width: 24px;
      height: 24px;
    }
  
    .lang-toggle {
      position: absolute;
      top: 8px;
      right: 41px;
      z-index: 3500;
    }

    .gm-fullscreen-control {
      display: none;
    }

    #fullScreenBtn{
      display: block;
      position: absolute;
      right:10px;
      top:6px;
      z-index:3500;
      background: transparent;
      border: none;  
    }

    #fullScreenBtn img{
      width: 24px;
      height: 24px;
    }

    .exitScreen-btn {
      background: transparent;
      border: none;
      padding: 6px;
      border-radius: 4px;
      cursor: pointer;
      box-shadow: none;
      z-index: 9999;
      display: none; 
      right: 10px;
      top: 5px;
      position: absolute;
    }
      
    .exitScreen-btn img {
      width: 30px;
      height: 30px;
    }
      
    .ios-fullscreen {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 9999 !important;
     }


    .controls-body input{
      width:95%
    }

    .map-wrapper{
      position: relative;
      width: 100vw;
      height: 79vh;
    }
  }