/* Base Styles */
    .time-converter-container * {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }
    


.time-converter-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    background: linear-gradient(135deg, #91a0b7 0%, #7788a9 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}
    
    /* Section Styles */
    .time-converter-container section {
      margin-bottom: 40px !important;
      padding: 25px !important;
      background-color: #ffffff !important;
      border-radius: 12px !important;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .time-converter-container section:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
/*     .time-converter-container h2 {
      font-size: 28px !important;
      font-weight: 700 !important;
      color: #2c3e50 !important;
      margin-bottom: 20px !important;
      padding-bottom: 10px !important;
      border-bottom: 2px solid #e6e9ec !important;
      position: relative !important;
    } */

.time-converter-container h2 {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e6e9ec !important;
    position: relative !important;
    text-transform: uppercase;
}
    
    .time-converter-container h2:after {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      bottom: -2px !important;
      width: 60px !important;
      height: 2px !important;
      background: linear-gradient(90deg, #3498db, #9b59b6) !important;
    }
    
    .time-converter-container h3 {
      font-size: 20px !important;
      font-weight: 600 !important;
      color: #34495e !important;
      margin-bottom: 15px !important;
    }
    
    .time-converter-container h4 {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #34495e !important;
      margin-bottom: 10px !important;
    }
    
    /* Main Converter Card */
    .converter-card {
      padding: 25px !important;
      border-radius: 12px !important;
      background-color: #ffffff !important;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    }
    
    .card-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 25px !important;
    }
    
    /* Theme Toggle */
    .theme-toggle {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    
    .theme-label {
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    .switch {
      position: relative !important;
      display: inline-block !important;
      width: 50px !important;
      height: 24px !important;
    }
    
    .switch input {
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    .slider {
      position: absolute !important;
      cursor: pointer !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background-color: #ccc !important;
      transition: .4s !important;
    }
    
    .slider:before {
      position: absolute !important;
      content: "" !important;
      height: 16px !important;
      width: 16px !important;
      left: 4px !important;
      bottom: 4px !important;
      background-color: white !important;
      transition: .4s !important;
    }
    
    input:checked + .slider {
      background-color: #3498db !important;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #3498db !important;
    }
    
    input:checked + .slider:before {
      transform: translateX(26px) !important;
    }
    
    .slider.round {
      border-radius: 34px !important;
    }
    
    .slider.round:before {
      border-radius: 50% !important;
    }
    
    /* Time Display */
    .time-display {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 30px !important;
      flex-wrap: wrap !important;
    }
    
    .time-block {
      flex: 1 !important;
      min-width: 200px !important;
      padding: 20px !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      gap: 15px !important;
      transition: transform 0.3s ease !important;
    }
    
    .time-block:hover {
      transform: scale(1.02) !important;
    }
    
    .pst {
      background: linear-gradient(135deg, #6dd5ed, #2193b0) !important;
      color: white !important;
    }
    
    .est {
      background: linear-gradient(135deg, #c471ed, #f64f59) !important;
      color: white !important;
    }
    
    .time-icon {
      font-size: 24px !important;
      width: 50px !important;
      height: 50px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background-color: rgba(255, 255, 255, 0.2) !important;
      border-radius: 50% !important;
    }
    
    .time-info h3 {
      color: white !important;
      margin-bottom: 5px !important;
      font-size: 18px !important;
    }
    
    .time {
      font-size: 28px !important;
      font-weight: 700 !important;
      margin-bottom: 5px !important;
    }
    
    .date {
      font-size: 14px !important;
      opacity: 0.9 !important;
    }
    
    .conversion-arrow {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 0 20px !important;
    }
    
    .arrow-animation {
      font-size: 24px !important;
      color: #7f8c8d !important;
      animation: pulse 1.5s infinite !important;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1) !important;
        opacity: 0.7 !important;
      }
      50% {
        transform: scale(1.1) !important;
        opacity: 1 !important;
      }
      100% {
        transform: scale(1) !important;
        opacity: 0.7 !important;
      }
    }
    
    /* Custom Time Section */
    .custom-time-section {
      margin-top: 30px !important;
      padding: 20px !important;
      background-color: #f8f9fa !important;
      border-radius: 10px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .time-input-container {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 15px !important;
      margin-bottom: 20px !important;
    }
    
    .time-input-group {
      flex: 1 !important;
      min-width: 100px !important;
    }
    
    .time-input-group label {
      display: block !important;
      margin-bottom: 8px !important;
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    .time-select {
      width: 100% !important;
      padding: 10px 15px !important;
      border: 1px solid #dcdfe6 !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      color: #2c3e50 !important;
      background-color: white !important;
      transition: border-color 0.3s !important;
    }
    
    .time-select:focus {
      outline: none !important;
      border-color: #3498db !important;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
    }
    
    .convert-button {
      display: block !important;
      width: 100% !important;
      padding: 1px !important;
      background: linear-gradient(90deg, #3498db, #2980b9) !important;
      color: white !important;
      border: none !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s !important;
      margin-bottom: 20px !important;
    }
    
    .convert-button:hover {
      background: linear-gradient(90deg, #2980b9, #3498db) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .convert-button:active {
      transform: translateY(0) !important;
    }
    
    .conversion-result {
      margin-top: 20px !important;
    }
    
    .result-card {
      background-color: white !important;
      padding: 15px !important;
      border-radius: 8px !important;
      border: 1px solid #e6e9ec !important;
      text-align: center !important;
    }
    
    #conversionResult {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: #2c3e50 !important;
      margin-top: 10px !important;
    }
    
    /* World Clock Section */
    .world-clocks {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      justify-content: space-between !important;
    }
    
    .clock-card {
      flex: 1 !important;
      min-width: 200px !important;
      background: white !important;
      padding: 20px !important;
      border-radius: 10px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
      text-align: center !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .clock-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    .city-name {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #2c3e50 !important;
      margin-bottom: 10px !important;
    }
    
    .clock-time {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: #3498db !important;
      margin-bottom: 5px !important;
    }
    
    .clock-date {
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    /* Time Difference Calculator */
    .time-diff-container {
      background-color: #f8f9fa !important;
      padding: 20px !important;
      border-radius: 10px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .time-diff-inputs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      margin-bottom: 20px !important;
    }
    
    .time-diff-group {
      flex: 1 !important;
      min-width: 200px !important;
    }
    
    .time-diff-group label {
      display: block !important;
      margin-bottom: 8px !important;
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    .location-select {
      width: 100% !important;
      padding: 12px 15px !important;
      border: 1px solid #dcdfe6 !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      color: #2c3e50 !important;
      background-color: white !important;
    }
    
    .diff-button {
      display: block !important;
      width: 100% !important;
      padding: 2px !important;
      background: linear-gradient(90deg, #9b59b6, #8e44ad) !important;
      color: white !important;
      border: none !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s !important;
      margin-bottom: 20px !important;
    }
    
    .diff-button:hover {
      background: linear-gradient(90deg, #8e44ad, #9b59b6) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .diff-card {
      background-color: white !important;
      padding: 15px !important;
      border-radius: 8px !important;
      border: 1px solid #e6e9ec !important;
      text-align: center !important;
    }
    
    #timeDiffResult {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: #9b59b6 !important;
      margin: 10px 0 !important;
    }
    
    .diff-details {
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    /* Meeting Planner */
    .meeting-planner-container {
      background-color: #f8f9fa !important;
      padding: 20px !important;
      border-radius: 10px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .meeting-inputs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      margin-bottom: 20px !important;
    }
    
    .meeting-time-group, .meeting-date-group {
      flex: 1 !important;
      min-width: 200px !important;
    }
    
    .meeting-time-group label, .meeting-date-group label {
      display: block !important;
      margin-bottom: 8px !important;
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    .meeting-time-group input, .meeting-date-group input {
      width: 100% !important;
      padding: 12px 15px !important;
      border: 1px solid #dcdfe6 !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      color: #2c3e50 !important;
      background-color: white !important;
    }
    
    .meeting-button {
      display: block !important;
      width: 100% !important;
      padding: 2px !important;
      background: linear-gradient(90deg, #27ae60, #2ecc71) !important;
      color: white !important;
      border: none !important;
      border-radius: 6px !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s !important;
      margin-bottom: 20px !important;
    }
    
    .meeting-button:hover {
      background: linear-gradient(90deg, #2ecc71, #27ae60) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .meeting-times-container {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 15px !important;
      margin-top: 15px !important;
    }
    
    .meeting-time-card {
      flex: 1 !important;
      min-width: 180px !important;
      background-color: white !important;
      padding: 15px !important;
      border-radius: 8px !important;
      border: 1px solid #e6e9ec !important;
      text-align: center !important;
      transition: transform 0.3s ease !important;
    }
    
    .meeting-time-card:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .meeting-location {
      font-size: 14px !important;
      color: #7f8c8d !important;
      margin-bottom: 8px !important;
    }
    
    .meeting-time-value {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #27ae60 !important;
    }
    
    /* DST Info Section */
    .dst-container {
      background-color: #f8f9fa !important;
      padding: 20px !important;
      border-radius: 10px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .dst-cards {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      margin-bottom: 20px !important;
    }
    
    .dst-card {
      flex: 1 !important;
      min-width: 250px !important;
      background-color: white !important;
      padding: 20px !important;
      border-radius: 8px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .dst-status {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #e74c3c !important;
      margin: 10px 0 !important;
      padding: 8px !important;
      background-color: #fef2f2 !important;
      border-radius: 4px !important;
      text-align: center !important;
    }
    
    .dst-dates {
      margin-top: 15px !important;
      font-size: 14px !important;
      color: #7f8c8d !important;
    }
    
    .dst-dates div {
      margin-bottom: 5px !important;
    }
    
    .dst-info-text {
      margin-top: 20px !important;
      padding: 15px !important;
      background-color: #f0f9ff !important;
      border-radius: 8px !important;
      border-left: 4px solid #3498db !important;
    }
    
    .dst-info-text p {
      margin-bottom: 10px !important;
      font-size: 15px !important;
      color: #34495e !important;
    }
    
    /* Supportive Content */
    .supportive-content {
      background-color: #ffffff !important;
      padding: 30px !important;
      border-radius: 12px !important;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    }
    
    .content-card {
      margin-bottom: 30px !important;
      padding: 20px !important;
      background-color: #f8f9fa !important;
      border-radius: 10px !important;
      border: 1px solid #e6e9ec !important;
    }
    
    .content-card p {
      margin-bottom: 15px !important;
      font-size: 16px !important;
      line-height: 1.6 !important;
      color: #34495e !important;
    }
    
    .info-graphic {
      margin: 20px 0 !important;
      height: 150px !important;
      position: relative !important;
      background: linear-gradient(90deg, #e0f7fa, #bbdefb) !important;
      border-radius: 8px !important;
      overflow: hidden !important;
    }
    
    .timezone-map {
      height: 100% !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 50px !important;
    }
    
    .map-marker {
      position: relative !important;
      text-align: center !important;
    }
    
    .marker-dot {
      width: 20px !important;
      height: 20px !important;
      background-color: #e74c3c !important;
      border-radius: 50% !important;
      margin: 0 auto 10px !important;
      box-shadow: 0 0 0 5px rgba(231, 76, 60, 0.2) !important;
      animation: pulse-marker 2s infinite !important;
    }
    
    @keyframes pulse-marker {
      0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4) !important;
      }
      70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0) !important;
      }
      100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0) !important;
      }
    }
    
    .marker-label {
      font-size: 16px !important;
      font-weight: 700 !important;
      color: #2c3e50 !important;
    }
    
    .time-difference {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      color: #3498db !important;
      background-color: white !important;
      padding: 8px 15px !important;
      border-radius: 20px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .conversion-examples {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 15px !important;
      margin-top: 15px !important;
    }
    
    .example {
      flex: 1 !important;
      min-width: 200px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 15px !important;
      background-color: white !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }
    
    .example-time {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #2c3e50 !important;
    }
    
    .example-arrow {
      color: #3498db !important;
      font-size: 20px !important;
    }
    
    .business-hours {
      margin-top: 20px !important;
    }
    
    .business-block {
      margin-bottom: 15px !important;
    }
    
    .business-block h4 {
      margin-bottom: 10px !important;
      font-size: 16px !important;
      color: #34495e !important;
    }
    
    .hours-bar {
      height: 30px !important;
      background: linear-gradient(90deg, #f5f7fa, #c3cfe2) !important;
      border-radius: 15px !important;
      position: relative !important;
      margin-bottom: 20px !important;
    }
    
/*     .hour-marker {
      position: absolute !important;
      top: -25px !important;
      transform: translateX(-50%) !important;
      font-size: 14px !important;
      color: #7f8c8d !important;
    } */

.hour-marker {
    position: absolute !important;
    top: 2px !important;
    transform: translateX(-50%) !important;
    font-size: 14px !important;
    color: #7f8c8d !important;
}
    
    .overlap-info {
      padding: 10px !important;
      background-color: #e8f5e9 !important;
      border-radius: 6px !important;
      border-left: 4px solid #27ae60 !important;
    }
    
    .overlap-info p {
      margin: 0 !important;
      font-size: 14px !important;
      color: #2c3e50 !important;
    }
    
    /* Dark Theme */
    .dark-theme {
      background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%) !important;
      color: #ecf0f1 !important;
    }
    
    .dark-theme section {
      background-color: #2c3e50 !important;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    .dark-theme h2 {
      color: #ecf0f1 !important;
      border-bottom: 2px solid #34495e !important;
    }
    
    .dark-theme h3, .dark-theme h4 {
      color: #ecf0f1 !important;
    }
    
    .dark-theme .converter-card,
    .dark-theme .clock-card,
    .dark-theme .meeting-time-card,
    .dark-theme .dst-card,
    .dark-theme .result-card {
      background-color: #34495e !important;
      color: #ecf0f1 !important;
    }
    
    .dark-theme .custom-time-section,
    .dark-theme .time-diff-container,
    .dark-theme .meeting-planner-container,
    .dark-theme .dst-container,
    .dark-theme .content-card {
      background-color: #2c3e50 !important;
      border-color: #34495e !important;
    }
    
    .dark-theme .time-select,
    .dark-theme .location-select,
    .dark-theme input[type="time"],
    .dark-theme input[type="date"] {
      background-color: #34495e !important;
      border-color: #4a6278 !important;
      color: #ecf0f1 !important;
    }
    
    .dark-theme .time-input-group label,
    .dark-theme .time-diff-group label,
    .dark-theme .meeting-time-group label,
    .dark-theme .meeting-date-group label {
      color: #bdc3c7 !important;
    }
    
    .dark-theme #conversionResult,
    .dark-theme #timeDiffResult,
    .dark-theme .meeting-time-value,
    .dark-theme .clock-time {
      color: #3498db !important;
    }
    
    .dark-theme .dst-info-text {
      background-color: #2c3e50 !important;
      border-left: 4px solid #3498db !important;
    }
    
    .dark-theme .dst-info-text p,
    .dark-theme .content-card p {
      color: #ecf0f1 !important;
    }
    
    .dark-theme .example {
      background-color: #34495e !important;
    }
    
    .dark-theme .example-time {
      color: #ecf0f1 !important;
    }
    
   /* ≤ 400px (small phones) */
@media (max-width: 400px) {
  .time-converter-container {
    padding: 10px !important;
  }
  .time-converter-container section {
    padding: 10px !important;
    margin-bottom: 20px !important;
  }
  .time-converter-container h2 { font-size: 12px!important; }
  .time-converter-container h3 { font-size: 1rem  !important; }
  .time-converter-container h4 { font-size: 0.9rem !important; }
  .time-converter-container p,
  .time-converter-container li {
    font-size: 0.85rem !important;
  }
  .converter-card,
  .clock-card,
  .meeting-planner-container,
  .dst-container,
  .supportive-content {
    padding: 10px !important;
  }
  .time-display { flex-direction: column !important; gap: 8px !important; }
  .time-block { padding: 8px !important; }
  .time    { font-size: 1.4rem !important; }
  .date    { font-size: 0.75rem !important; }
  .convert-button,
  .diff-button,
  .meeting-button {
    font-size: 0.9rem !important;
    padding: 6px 8px !important;
  }
  .time-select,
  .location-select,
  .meeting-input,
  input[type="time"],
  input[type="date"] {
    font-size: 0.9rem !important;
    padding: 6px 8px !important;
  }
  #conversionResult,
  #timeDiffResult,
  .meeting-time-value,
  .clock-time {
    font-size: 1.6rem !important;
  }
}

/* 401px–600px (large phones) */
@media (min-width: 401px) and (max-width: 600px) {
  .time-converter-container { padding: 12px !important; }
  .time-converter-container section { padding: 12px !important; margin-bottom: 25px !important; }
  .time-converter-container h2 { font-size: 12px !important; }
  .time-converter-container h3 { font-size: 1.1rem !important; }
  .time-converter-container h4 { font-size: 1rem  !important; }
  .time-converter-container p,
  .time-converter-container li {
    font-size: 0.9rem !important;
  }
  .converter-card,
  .clock-card,
  .meeting-planner-container,
  .dst-container,
  .supportive-content {
    padding: 12px !important;
  }
  .time-display { gap: 10px !important; }
  .time-block { padding: 10px !important; }
  .time    { font-size: 1.8rem !important; }
  .date    { font-size: 0.85rem !important; }
  .convert-button,
  .diff-button,
  .meeting-button {
    font-size: 1rem !important;
    padding: 8px 10px !important;
  }
  .time-select,
  .location-select,
  .meeting-input,
  input[type="time"],
  input[type="date"] {
    font-size: 1rem !important;
    padding: 8px 10px !important;
  }
  #conversionResult,
  #timeDiffResult,
  .meeting-time-value,
  .clock-time {
    font-size: 2rem !important;
  }
}

/* 601px–768px (tablets) */
@media (min-width: 601px) and (max-width: 768px) {
  .time-converter-container { padding: 15px !important; }
  .time-converter-container section { padding: 15px !important; margin-bottom: 30px !important; }
  .time-converter-container h2 { font-size: 1.6rem !important; }
  .time-converter-container h3 { font-size: 1.2rem !important; }
  .time-converter-container h4 { font-size: 1.1rem !important; }
  .time-converter-container p,
  .time-converter-container li {
    font-size: 1rem !important;
  }
  .converter-card,
  .clock-card,
  .meeting-planner-container,
  .dst-container,
  .supportive-content {
    padding: 15px !important;
  }
  .time-display { gap: 12px !important; }
  .time-block { padding: 12px !important; }
  .time    { font-size: 2.2rem !important; }
  .date    { font-size: 1rem  !important; }
  .convert-button,
  .diff-button,
  .meeting-button {
    font-size: 1.1rem !important;
    padding: 10px 12px !important;
  }
  .time-select,
  .location-select,
  .meeting-input,
  input[type="time"],
  input[type="date"] {
    font-size: 1.05rem !important;
    padding: 10px 12px !important;
  }
  #conversionResult,
  #timeDiffResult,
  .meeting-time-value,
  .clock-time {
    font-size: 2.4rem !important;
  }
}

/* 769px–992px (small desktops) */
@media (min-width: 769px) and (max-width: 992px) {
  .time-converter-container { padding: 18px !important; }
  .time-converter-container section { padding: 18px !important; margin-bottom: 35px !important; }
  .time-converter-container h2 { font-size: 1.8rem !important; }
  .time-converter-container h3 { font-size: 1.3rem !important; }
  .time-converter-container h4 { font-size: 1.2rem !important; }
  .time-converter-container p,
  .time-converter-container li {
    font-size: 1.1rem !important;
  }
  .converter-card,
  .clock-card,
  .meeting-planner-container,
  .dst-container,
  .supportive-content {
    padding: 18px !important;
  }
  .time-display { gap: 15px !important; }
  .time-block { padding: 15px !important; }
  .time    { font-size: 2.6rem !important; }
  .date    { font-size: 1.1rem !important; }
  .convert-button,
  .diff-button,
  .meeting-button {
    font-size: 1.2rem !important;
    padding: 12px 14px !important;
  }
  .time-select,
  .location-select,
  .meeting-input,
  input[type="time"],
  input[type="date"] {
    font-size: 1.1rem !important;
    padding: 12px 14px !important;
  }
  #conversionResult,
  #timeDiffResult,
  .meeting-time-value,
  .clock-time {
    font-size: 2.8rem !important;
  }
}