@media screen and (max-width: 768px) {
     .landing {
          flex-direction: column;
          padding: 20px;
          text-align: center;
          justify-content: center;
          gap: 30px;
     }

     .hero-content {
          max-width: 100%;
     }

     .hero-content h1 {
          font-size: 2em;
     }

     .hero-content p {
          font-size: 1em;
     }

     .btn-group {
          flex-direction: column;
          gap: 15px;
     }

     .hero-btn {
          width: 100%;
     }

     .animation img {
          width: 200px;
     }

     .map-box {
          flex-direction: column;
     }

     .sidebar {
          width: 100%;
          height: auto;
          max-height: 40vh;
          position: relative;
     }

     #map {
          height: 60vh;
     }

     .search-container {
          flex-direction: column;
     }

     .search-btn {
          width: 100%;
          margin-top: 10px;
     }

     .info-box {
          padding: 10px;
          margin: 10px 0;
     }

     .tracker-container {
          height: auto;
          min-height: 100vh;
     }

     .controls {
          grid-template-columns: 1fr;
          padding: 10px;
     }

     .input-group {
          margin-bottom: 10px;
     }

     .button-group {
          flex-direction: column;
     }

     .track-btn {
          width: 100%;
     }

     .directions-panel {
          width: 100%;
          right: 0;
          top: auto;
          bottom: 0;
          max-height: 50vh;
          border-radius: 8px 8px 0 0;
     }
}

@media screen and (max-width: 480px) {
     .landing {
          padding: 15px;
     }

     .hero-content h1 {
          font-size: 1.8em;
     }

     .animation img {
          width: 150px;
     }

     .sidebar {
          padding: 15px;
     }

     .sidebar h2 {
          font-size: 1.2em;
     }

     .info-box {
          padding: 8px;
     }

     .controls {
          padding: 8px;
          gap: 10px;
     }

     .route-input {
          padding: 8px;
          font-size: 13px;
     }

     .track-btn {
          padding: 10px 20px;
          font-size: 14px;
     }
}

/* Additional Responsive Styles */
@media screen and (max-width: 1024px) {
     .landing {
          padding: 3%;
     }

     .hero-content {
          max-width: 60%;
     }

     .animation img {
          width: 250px;
     }
}

@media screen and (max-width: 768px) {
     .typing-text {
          font-size: 1em;
          height: 1.2em;
     }

     .detail-info {
          font-size: 0.9em;
     }

     .map-box {
          height: auto;
          min-height: 100vh;
     }

     .sidebar {
          position: fixed;
          bottom: 0;
          left: 0;
          z-index: 1000;
          transform: translateY(100%);
          transition: transform 0.3s ease;
     }

     .sidebar.active {
          transform: translateY(0);
     }

     .toggle-btn {
          display: block;
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 1001;
          background: #00d2ff;
          color: white;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
     }

     .search-container {
          position: relative;
          margin: 10px 0;
     }

     #searchInput {
          padding-right: 40px;
     }

     .search-btn {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 40px;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
     }
}

@media screen and (max-width: 480px) {
     .landing {
          padding: 10px;
     }

     .hero-content h1 {
          font-size: 1.5em;
          margin-bottom: 0.3em;
     }

     .hero-content p {
          font-size: 0.9em;
          margin-bottom: 1em;
     }

     .btn-group {
          gap: 10px;
     }

     .hero-btn {
          padding: 8px 15px;
          font-size: 0.9em;
     }

     .animation img {
          width: 120px;
     }

     .controls {
          padding: 5px;
     }

     .input-group {
          margin-bottom: 5px;
     }

     .route-input {
          padding: 6px;
          font-size: 12px;
     }

     .track-btn {
          padding: 8px 15px;
          font-size: 12px;
     }

     .info-box {
          padding: 8px;
          margin: 8px 0;
          font-size: 0.9em;
     }

     .value {
          font-size: 0.9em;
     }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
     .landing {
          padding: 10px 5%;
     }

     .hero-content {
          max-width: 50%;
     }

     .animation img {
          width: 100px;
     }

     .map-box {
          height: 100vh;
     }

     .sidebar {
          max-height: 100vh;
     }

     .controls {
          padding: 5px 10px;
     }

     .button-group {
          flex-direction: row;
          flex-wrap: wrap;
     }

     .track-btn {
          width: auto;
     }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .hero-btn,
     .track-btn,
     .search-btn {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
     }
}

@media (prefers-color-scheme: dark) {
     .landing {
          background-color: #000;
     }

     .sidebar {
          background: rgba(0, 0, 0, 0.9);
     }

     .info-box {
          background: rgba(255, 255, 255, 0.05);
     }
}

/* Live Route Tracker Responsive Styles */
@media screen and (max-width: 768px) {
     .tracker-container {
          height: 100vh;
          display: flex;
          flex-direction: column;
     }

     #map {
          height: 60vh;
          min-height: 300px;
     }

     .controls {
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          background: rgba(45, 45, 45, 0.95);
          backdrop-filter: blur(10px);
     }

     .input-group {
          width: 100%;
     }

     .route-input {
          width: 100%;
          font-size: 14px;
          padding: 12px;
     }

     .button-group {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          width: 100%;
     }

     .track-btn {
          width: 100%;
          padding: 12px;
          font-size: 14px;
          white-space: nowrap;
     }

     .directions-panel {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          max-height: 40vh;
          border-radius: 15px 15px 0 0;
          transform: translateY(100%);
          transition: transform 0.3s ease;
          z-index: 1000;
     }

     .directions-panel.active {
          transform: translateY(0);
     }

     .direction-step {
          padding: 12px;
          margin-bottom: 8px;
          font-size: 14px;
     }

     .close-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 50%;
     }
}

@media screen and (max-width: 480px) {
     .tracker-container {
          height: 100vh;
     }

     #map {
          height: 50vh;
          min-height: 250px;
     }

     .controls {
          padding: 8px;
          gap: 8px;
     }

     .route-input {
          padding: 10px;
          font-size: 13px;
     }

     .button-group {
          grid-template-columns: 1fr;
     }

     .track-btn {
          padding: 10px;
          font-size: 13px;
     }

     .directions-panel {
          max-height: 50vh;
     }

     .direction-step {
          padding: 10px;
          font-size: 13px;
     }

     .close-btn {
          width: 25px;
          height: 25px;
     }
}

/* Landscape Mode for Tracker */
@media screen and (max-height: 480px) and (orientation: landscape) {
     .tracker-container {
          flex-direction: row;
     }

     #map {
          height: 100vh;
          width: 60%;
     }

     .controls {
          width: 40%;
          height: 100vh;
          overflow-y: auto;
          padding: 15px;
     }

     .button-group {
          grid-template-columns: 1fr 1fr;
     }

     .directions-panel {
          width: 40%;
          max-height: 100vh;
          right: 0;
          left: auto;
          border-radius: 0;
     }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
     .track-btn,
     .close-btn,
     .direction-step {
          cursor: default;
     }

     .track-btn:active,
     .close-btn:active {
          transform: scale(0.98);
     }

     .direction-step {
          padding: 15px;
          margin-bottom: 10px;
     }

     .route-input {
          font-size: 16px; /* Prevents zoom on iOS */
     }
}

/* High-DPI Screen Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .tracker-container {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
     }

     .controls,
     .directions-panel {
          backdrop-filter: blur(20px);
     }
}