body {
        margin: 0;
    }




    @media (max-width: 576px) {
      #india-map,
      #world-map {
        position: relative;
        left: 50%;
        transform: translate(-50%, 250px);
      }
    
      .xxx{
        position: relative;
        left: 50%;
        transform: translate(-50%, 250px);
      }
      
      
}



    /* =========================================================
       FIXED LEFT BUTTONS (International / Domestic)
       ========================================================= */
    .side-buttons {
        margin-top: 250px;
        position: absolute;
        left: 20px;
        
        /* top: 50%; */
        /* transform: translateY(-50%); */
        display: flex;
        flex-direction: column;
        z-index: 999;
        gap: 12px;
    }

    /* .side-buttons {
        position: absolute;  
        top: 0;
        left: 0;
        margin-top: 20px;
    } */
.map-buttons {
      margin-top: 30px;
    position: absolute;
    /* top: 20px; */
    right: 20px;
    z-index: 999;  
      gap: 12px;   
}
    #network:has(.side-buttons-fixed) .side-buttons {
  position: fixed;
  top: 100px;          /* adjust as needed */
  left: 20px;          /* keep your exact position */
  z-index: 9999;
}

 #network:has(.map-buttons-fixed) .map-buttons {
  position: fixed;
  top: 100px;          /* adjust as needed */
  left: 20px;          /* keep your exact position */
  z-index: 9999;
}

 .side-buttons button.active {
             background-color: #65c6cb;
    color: white;
        }
    
        .side-buttons button {
          border-radius: 15px;
            padding: 12px 20px;
            border: none;
            font-size: 16px;
            /* background: #222;
            color: white;
            border-radius: 6px; */
            cursor: pointer;
            transition: 0.3s;
            width: 150px;
        }

        /* .side-buttons button.active {
            background: #007bff;
        }  */

    /* =========================================================
       FIXED TOP-RIGHT BUTTONS (MAP / LIST)
       ========================================================= */
    /* .top-right-buttons {
        position: absolute; */
        /* top: 20px; */
        /* right: 20px;
        display: flex;
        gap: 10px;
        z-index: 999; */
    /* } */

    .top-right-buttons button {
        padding: 10px 18px;
        border: none;
        /* background: #222;
        color: white; */
        font-size: 15px;
       border-radius: 15px;
        cursor: pointer;
        transition: 0.25s;
    }

    .top-right-buttons button.active {
        background-color: #65c6cb;
        color: white;
    }

    

    /* =========================================================
       MAP CONTAINER (AUTO HEIGHT)
       ========================================================= */
    .map-container {
        width: 100%;
        background: #ddd;
        /* margin-top: 80px; */
        position: relative;
        display: none;
    }

    .map-container img {
        width: 100%;
        height: auto;   /* auto height */
        display: block;
    }

    /* =========================================================
       LIST CONTAINER
       ========================================================= */
   /* LIST CONTAINER (RESPONSIVE) */




    /* LIST CONTAINER (RESPONSIVE + NO SCROLLBAR) */
    .list-container {
        width: 100% !important;
        display: none;
        padding: 20px;
        /* background: white; */
        /* margin-top: 80px; */
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .list-box {
        width: 100% !important;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
        /* background: #fafafa;
        border-radius: 12px; */
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    /* Better line spacing */
    ul {
        line-height: 1.9;
        padding-left: 20px;
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 992px) {
        .list-container {
            padding: 15px;
        }
        .list-box {
            max-width: 95%;
            padding: 18px;
        }
    }

    @media (max-width: 576px) {
        .list-container {
            padding: 10px;
        }
        .list-box {
            max-width: 100%;
            padding: 15px;
            border-radius: 10px;
        }
        .list-box h2 {
            font-size: 20px;
            text-align: center;
        }
        ul {
            font-size: 16px;
        }
    }



    /* Tablets */
    @media (max-width: 992px) {
    .side-buttons {
        margin-top: 15px;
    }
    }

    /* Mobile */
    @media (max-width: 768px) {
    .side-buttons {
        margin-top: 12px;
    }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
    .side-buttons {
        margin-top: 8px;
    }
    }

    /* Extra Small Phones */
    @media (max-width: 360px) {
    .side-buttons {
        margin-top: 5px;
    }
    }








    /* Card Grid */
    .city-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    /* Transparent Elegant Card */
    .city-card {
        padding: 20px;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        
        background: transparent;
        border-radius: 12px;
        cursor: pointer;

        /* Smooth Shadow */
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
        overflow: hidden;

        /* Animation */
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        position: relative;
    }

    /* Text Scroll / Slide Up Effect */
    .city-card span {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    /* Hover Effects */
    .city-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }

    .city-card:hover span {
        transform: translateY(-6px);
    }

    /* Responsive */
    @media(max-width: 480px){
        .city-card {
            font-size: 17px;
            padding: 16px;
        }
    }
    .city-icon {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }


    .world-list-container {

        background: url("../img/map.png") no-repeat center center;
        background-size: cover;
        justify-content: center;
        align-items: center;

    }

    .india-list-container {

        background: url("../img/Indiamap.png") no-repeat center center;
        background-size: contain;
        justify-content: center;
        align-items: center;


    }