@media (min-width: 993px) and (max-width: 1300px) {
     
    html, body {
        height: 100%;
        width: 100vw;
        margin: 0;
        font-family: Arial, sans-serif;
        font-size: 13px; 
    }
    
    #map {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
    }
    
    .header-placeholder {
        position: absolute;
        z-index: 2000;
    }
    
    .map-title {
        position: absolute;
        top: 2.5rem; 
        width: 100%;
        z-index: 4000;
        align-items: center;
        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: 2rem; 
        pointer-events: none;
    }
    
    .hamburger-btn {
        display: none;
    }
    
    .custom-controls {
        width: 19rem;  
        height: 36rem; 
        border-radius: 1rem; 
        border: 0.375rem solid rgba(255, 255, 255, 0.5); 
        backdrop-filter: blur(0.35rem); 
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 3000;
        color: #0b3a76;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    
    .custom-controls.active { transform: translateX(10%); } 
    
    .arrow-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        left: 1.5625rem; 
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.50);
        border: none;
        border-radius: 50%;
        width: 3.125rem; 
        height: 3.125rem; 
        cursor: pointer;
        z-index: 3500;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: left 0.3s ease-in-out;
    }
    
    .arrow-btn img {
        width: 0.875rem;  
        height: 0.94rem;  
        flex-shrink: 0;
    }
    
    .arrow-btn img:hover {
        transform: translateX(0.3125rem);
        transition: transform 0.2s ease;
        background: none;
        border: none;
    }
   
    .custom-controls.active + .arrow-btn {
        left: 24.0625rem;
    }
    
    .controls-header {
        background: linear-gradient(0deg, rgba(1, 44, 108, 0.05) 0%, rgba(1, 44, 108, 0.05) 100%), rgba(255, 255, 255, 0.80);
        padding: 1rem; 
    }
    
    .controls-header h3 {
        margin: 0 0 0.8rem 0; 
        color: #0b3a76;
        font-size: 1rem; 
    }
    
    .legend li {
        margin-bottom: 0.375rem; 
        font-size: 0.75rem; 
    }
    
    .legend-box {
        width: 0.8rem; 
        height: 0.8rem;
        margin-right: 0.7rem; 
        border-radius: 0.125rem; 
    }
 
    .controls-body {
        padding: 0.7rem 1.875rem; 
        background: #fff;
        height: 30.125rem; 
    }
    
    .controls-body label {
        margin-top: 0.6rem; 
        margin-bottom: 0.25rem; 
        font-size: 0.8rem; 
    }
    
    .controls-body select,
    .controls-body input {
        padding: 0.3rem; 
        font-size: 0.7rem; 
    }
    
    #plotBtn {
        margin-top: 1.2rem; 
        padding: 0.5rem; 
        font-size: 0.6rem; 
    }
    
    #plotBtn .icon {
        width: 0.675rem; 
        height: 0.9rem; 
    }
    #plotBtn .label {
        margin-left: 0.3125rem; 
    }
    
    footer.site-footer {
        height: 4.625rem; 
        padding: 0 1.25rem; 
        font-size: 0.875rem; 
    }
    
    .map-footer__inner {
        padding: 0 1rem; 
    }
    
    .map-footer__left,
    .map-footer__right {
        font-size: 0.75rem; 
    }
    
    .map-footer__right {
        gap: 1.25rem; 
    }
    .map-footer__org{
        font-weight: 600;
        font-size: 12px;
      }
    
    .map-footer__item {
        gap: 0.375rem; 
    }
    
    .map-footer__icon {
        width: 1.5rem; 
        height: 1.5rem;
    }
    
    .map-arrows {
        right: 2.1875rem; 
    }
    
    .map-arrows button {
        width: 4.6875rem; 
        height: 4.6875rem;
    }
    
    .map-arrows img {
        width: 2.4375rem; 
        height: 2.8125rem; 
    }
    
    .map-zoom {
        right: 1.875rem; 
        bottom: 11.875rem; 
        gap: 0.75rem; 
    }
    
    .map-zoom button {
        width: 3.625rem; 
        height: 3.625rem;
    }
    
    .map-zoom img {
        width: 1.875rem; 
        height: 1.6875rem; 
    }

    #pageCounter {
        font-size: 0.75rem; 
    }
    .reset-link button{
        font-size: 0.75rem;
    }


    hr {
        margin-bottom: 1rem;
        margin-top: 2rem;
    }

    #latInput, #lngInput {
        width:15rem;
        padding:0.3rem;
    }

    .gm-fullscreen-control {
        top: 0.1rem !important;  
        right:0.3rem !important;
        width:3rem !important;
        height:3rem !important;
    }

    .lang-toggle {
        top: 1.6rem;
        right:4rem;

    }

    .reset-bar{
        margin-bottom:15px;
    }

    .controls-body select {
        background: url(https://mciamauritiusmap.kinsta.cloud/wp-content/uploads/2025/09/chevron-bottom.png) no-repeat right 10px center;
        background-size: 13px;
    }
    
    .close-btn img {
        width: 20px;
        height: 20px;
    }

}