/* Reset and 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 {
      width: 100% !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 2rem !important;
      background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%) !important;
      border-radius: 12px !important;
      color: #333 !important;
    }
    
    /* Card Styles */
    .converter-card {
      background: rgba(255, 255, 255, 0.9) !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
      padding: 2rem !important;
      margin-bottom: 2rem !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
      transition: all 0.3s ease !important;
    }
    
    .converter-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }
    
    .card-header {
      text-align: center !important;
      margin-bottom: 1.5rem !important;
      padding-bottom: 1rem !important;
      border-bottom: 2px solid rgba(58, 28, 113, 0.2) !important;
    }
    
    .tool-title {
      font-size: 2rem !important;
      font-weight: 700 !important;
      color: #3a1c71 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .tool-subtitle {
      font-size: 1.1rem !important;
      color: #666 !important;
    }
    
    /* Current Time Display */
    .current-time-display {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 2rem !important;
      flex-wrap: wrap !important;
    }
    
    .time-block {
      flex: 1 !important;
      min-width: 200px !important;
      background: linear-gradient(to bottom, #f8f9fa, #e9ecef) !important;
      padding: 1.5rem !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      text-align: center !important;
      position: relative !important;
      overflow: hidden !important;
      transition: all 0.3s ease !important;
    }
    
    .time-block:hover {
      transform: scale(1.02) !important;
    }
    
    .time-block::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 5px !important;
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
    }
    
    .time-location {
      font-size: 1.2rem !important;
      font-weight: 600 !important;
      color: #444 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .current-time {
      font-size: 2.2rem !important;
      font-weight: 700 !important;
      color: #d76d77 !important;
      margin: 0.5rem 0 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    .current-date {
      font-size: 1rem !important;
      color: #666 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .timezone-info {
      font-size: 0.85rem !important;
      color: #888 !important;
      background: rgba(0, 0, 0, 0.05) !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 20px !important;
      display: inline-block !important;
      margin-top: 0.5rem !important;
    }
    
    .time-arrow {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 1rem !important;
      color: #3a1c71 !important;
      animation: pulse 2s infinite !important;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1) !important;
        opacity: 1 !important;
      }
      50% {
        transform: scale(1.1) !important;
        opacity: 0.8 !important;
      }
      100% {
        transform: scale(1) !important;
        opacity: 1 !important;
      }
    }
    
    /* Time Difference Display */
    .time-difference-display {
      background: rgba(215, 109, 119, 0.1) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      margin-bottom: 2rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
    }
    
    .time-diff-label {
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .time-diff-value {
      font-weight: 700 !important;
      color: #3a1c71 !important;
    }
    
    .dst-indicator {
      font-size: 0.9rem !important;
      color: #d76d77 !important;
      background: rgba(215, 109, 119, 0.1) !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 20px !important;
    }
    
    /* Quick Conversion */
    .quick-conversion {
      background: linear-gradient(to right, rgba(58, 28, 113, 0.1), rgba(215, 109, 119, 0.1)) !important;
      padding: 1.5rem !important;
      border-radius: 12px !important;
      margin-bottom: 2rem !important;
      text-align: center !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    
    .quick-conversion::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 5px !important;
      height: 100% !important;
      background: linear-gradient(to bottom, #3a1c71, #d76d77) !important;
    }
    
    .quick-conversion-title {
      font-size: 1.2rem !important;
      font-weight: 600 !important;
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
    }
    
    .quick-result {
      font-size: 1.8rem !important;
      font-weight: 700 !important;
      color: #d76d77 !important;
      margin-bottom: 1rem !important;
    }
    
    /* Converter Controls */
    .converter-controls {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      padding: 1.5rem !important;
      margin-bottom: 2rem !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .control-section {
      margin-bottom: 1.5rem !important;
    }
    
    .control-section label {
      display: block !important;
      font-weight: 600 !important;
      color: #444 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .time-input-group {
      display: flex !important;
      gap: 0.5rem !important;
      flex-wrap: wrap !important;
    }
    
    .time-input, .period-select, .timezone-select {
      padding: 0.7rem 1rem !important;
      border: 2px solid rgba(58, 28, 113, 0.3) !important;
      border-radius: 8px !important;
      font-size: 1rem !important;
      outline: none !important;
      transition: all 0.3s ease !important;
    }
    
    .time-input:focus, .period-select:focus, .timezone-select:focus {
      border-color: #3a1c71 !important;
      box-shadow: 0 0 0 3px rgba(58, 28, 113, 0.2) !important;
    }
    
    .convert-button {
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      color: white !important;
      border: none !important;
      padding: 0.7rem 1.5rem !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 4px 10px rgba(58, 28, 113, 0.3) !important;
    }
    
    .convert-button:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 15px rgba(58, 28, 113, 0.4) !important;
    }
    
    .convert-button:active {
      transform: translateY(1px) !important;
    }
    
    .result-section {
      display: flex !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 1rem !important;
      background: rgba(215, 109, 119, 0.05) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
    }
    
    .result-label {
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .result-value {
      font-weight: 700 !important;
      color: #d76d77 !important;
      font-size: 1.1rem !important;
    }
    
    .copy-button {
      display: flex !important;
      align-items: center !important;
      gap: 0.3rem !important;
      background: rgba(58, 28, 113, 0.1) !important;
      color: #3a1c71 !important;
      border: none !important;
      padding: 0.5rem 1rem !important;
      border-radius: 6px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .copy-button:hover {
      background: rgba(58, 28, 113, 0.2) !important;
    }
    
    /* Additional Features */
    .additional-features {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      margin-bottom: 2rem !important;
    }
    
    .feature-tabs {
      display: flex !important;
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      padding: 0.5rem !important;
      border-radius: 8px 8px 0 0 !important;
      overflow-x: auto !important;
    }
    
    .tab-btn {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.7) !important;
      border: none !important;
      padding: 0.7rem 1.2rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      border-radius: 6px !important;
      position: relative !important;
      white-space: nowrap !important;
    }
    
    .tab-btn.active {
      background: rgba(255, 255, 255, 0.2) !important;
      color: white !important;
    }
    
    .tab-btn:hover {
      color: white !important;
    }
    
    .tab-content {
      padding: 1.5rem !important;
    }
    
    .tab-pane {
      display: none !important;
    }
    
    .tab-pane.active {
      display: block !important;
      animation: fadeIn 0.5s ease !important;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0 !important;
        transform: translateY(10px) !important;
      }
      to {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
    }
    
    /* World Map Tab */
    .world-map-container {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 8px !important;
      padding: 1rem !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .map-title {
      font-size: 1.2rem !important;
      font-weight: 600 !important;
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .world-map {
      position: relative !important;
      height: 300px !important;
      border-radius: 8px !important;
      overflow: hidden !important;
    }
    
    .map-visualization {
      width: 100% !important;
      height: 100% !important;
      position: relative !important;
      background: linear-gradient(to right, #cfd9df, #e2ebf0) !important;
      border-radius: 8px !important;
    }
    
    .map-image {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath fill='%23d1d8e0' d='M0,0 L1000,0 L1000,500 L0,500 Z'%3E%3C/path%3E%3Cpath fill='%23a5b1c2' d='M250,60 Q400,40 500,80 T750,60 L800,120 Q700,180 600,150 T400,180 L250,60 Z'%3E%3C/path%3E%3Cpath fill='%23a5b1c2' d='M50,200 Q150,150 250,200 T450,180 L500,250 Q400,300 300,280 T100,300 L50,200 Z'%3E%3C/path%3E%3Cpath fill='%23a5b1c2' d='M700,200 Q800,180 900,220 L950,300 Q850,350 750,320 L700,200 Z'%3E%3C/path%3E%3Cpath fill='%23a5b1c2' d='M300,350 Q450,320 550,370 T800,350 L850,450 Q700,480 550,450 T350,480 L300,350 Z'%3E%3C/path%3E%3C/svg%3E") !important;
      background-size: cover !important;
      opacity: 0.7 !important;
    }
    
    .time-zone-marker {
      position: absolute !important;
      transform: translate(-50%, -50%) !important;
      z-index: 2 !important;
    }
    
    .marker-dot {
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: white !important;
      border: 2px solid !important;
      margin: 0 auto 5px !important;
    }
    
    .utc .marker-dot {
      border-color: #3a1c71 !important;
    }
    
    .est .marker-dot {
      border-color: #d76d77 !important;
    }
    
    .marker-label {
      font-weight: 600 !important;
      font-size: 0.9rem !important;
      color: #333 !important;
      text-align: center !important;
      margin-bottom: 2px !important;
    }
    
    .marker-time {
      font-size: 0.8rem !important;
      color: #555 !important;
      background: rgba(255, 255, 255, 0.8) !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      text-align: center !important;
    }
    
    .time-zone-info {
      position: absolute !important;
      bottom: 10px !important;
      right: 10px !important;
      background: rgba(255, 255, 255, 0.9) !important;
      padding: 10px !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
      z-index: 3 !important;
    }
    
    .info-item {
      display: flex !important;
      justify-content: space-between !important;
      margin-bottom: 5px !important;
      font-size: 0.9rem !important;
    }
    
    .info-label {
      font-weight: 600 !important;
      color: #555 !important;
      margin-right: 10px !important;
    }
    
    .info-value {
      color: #3a1c71 !important;
    }
    
    /* Business Hours Tab */
    .business-hours-display {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    
    .hours-block {
      flex: 1 !important;
      min-width: 250px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .hours-block h4 {
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
      padding-bottom: 0.5rem !important;
      border-bottom: 1px solid rgba(58, 28, 113, 0.2) !important;
    }
    
    .hours-conversion {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.5rem !important;
    }
    
    .hour-row {
      display: flex !important;
      justify-content: space-between !important;
      padding: 0.5rem !important;
      border-radius: 4px !important;
      transition: all 0.2s ease !important;
    }
    
    .hour-row:nth-child(odd) {
      background: rgba(215, 109, 119, 0.05) !important;
    }
    
    .hour-row:hover {
      background: rgba(215, 109, 119, 0.1) !important;
    }
    
    .overlap-hours {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .overlap-hours h4 {
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .timeline {
      position: relative !important;
      margin-top: 2rem !important;
    }
    
    .timeline-hours {
      display: flex !important;
      justify-content: space-between !important;
      margin-bottom: 0.5rem !important;
      color: #666 !important;
      font-size: 0.8rem !important;
    }
    
    .timeline-bars {
      position: relative !important;
      height: 120px !important;
    }
    
    .timezone-bar {
      position: relative !important;
      height: 30px !important;
      margin-bottom: 10px !important;
      background: rgba(0, 0, 0, 0.05) !important;
      border-radius: 4px !important;
    }
    
    .bar-label {
      position: absolute !important;
      left: -40px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .bar-fill {
      position: absolute !important;
      height: 100% !important;
      border-radius: 4px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: white !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
    }
    
    .utc .bar-fill {
      background: linear-gradient(to right, #3a1c71, #5c3799) !important;
    }
    
    .est .bar-fill {
      background: linear-gradient(to right, #d76d77, #e08e96) !important;
    }
    
    .overlap-indicator {
      position: relative !important;
      height: 30px !important;
      margin-top: 20px !important;
      background: rgba(0, 0, 0, 0.05) !important;
      border-radius: 4px !important;
    }
    
    .overlap-label {
      position: absolute !important;
      left: -60px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      font-weight: 600 !important;
      color: #555 !important;
    }
    
    .overlap-fill {
      position: absolute !important;
      height: 100% !important;
      border-radius: 4px !important;
      background: linear-gradient(to right, #ffaf7b, #ffc107) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #333 !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      text-align: center !important;
    }
    
    /* Day/Night Tab */
    .day-night-display {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
    }
    
    .day-night-info {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 1.5rem !important;
    }
    
    .day-night-block {
      flex: 1 !important;
      min-width: 250px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .day-night-block h4 {
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .sun-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.7rem !important;
      margin-bottom: 1rem !important;
    }
    
    .sun-event {
      display: flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      color: #555 !important;
    }
    
    .day-night-status {
      text-align: center !important;
      font-weight: 600 !important;
      color: #d76d77 !important;
      padding: 0.5rem !important;
      background: rgba(215, 109, 119, 0.1) !important;
      border-radius: 6px !important;
      margin-top: 1rem !important;
    }
    
    .visual-day-night {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .visual-label {
      font-weight: 600 !important;
      color: #555 !important;
      margin-bottom: 1rem !important;
      text-align: center !important;
    }
    
    .visual-timeline {
      height: 80px !important;
      background: linear-gradient(to right, #2c3e50, #4ca1af, #2c3e50) !important;
      border-radius: 8px !important;
      position: relative !important;
      margin: 2rem 0 !important;
    }
    
    .timeline-marker {
      position: absolute !important;
      transform: translateX(-50%) !important;
    }
    
    .marker-time {
      position: absolute !important;
      bottom: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background: white !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 4px !important;
      font-weight: 600 !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
      white-space: nowrap !important;
      margin-bottom: 0.5rem !important;
    }
    
    .utc .marker-time {
      color: #3a1c71 !important;
    }
    
    .est .marker-time {
      color: #d76d77 !important;
    }
    
    .marker-dot {
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: white !important;
      border: 2px solid !important;
    }
    
    .utc .marker-dot {
      border-color: #3a1c71 !important;
    }
    
    .est .marker-dot {
      border-color: #d76d77 !important;
    }
    
    /* Saved Times Tab */
    .saved-times-display {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
    }
    
    .saved-times-form {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .saved-times-form h4 {
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
    }
    
    .save-time-inputs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
      align-items: center !important;
    }
    
    .label-input {
      flex-grow: 1 !important;
      padding: 0.7rem 1rem !important;
      border: 2px solid rgba(58, 28, 113, 0.3) !important;
      border-radius: 8px !important;
      font-size: 1rem !important;
      outline: none !important;
    }
    
    .save-button {
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      color: white !important;
      border: none !important;
      padding: 0.7rem 1.5rem !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .saved-times-list {
      background: rgba(255, 255, 255, 0.7) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    .saved-times-list h4 {
      color: #3a1c71 !important;
      margin-bottom: 1rem !important;
    }
    
    .no-saved-message {
      color: #888 !important;
      font-style: italic !important;
      text-align: center !important;
      padding: 1rem !important;
    }
    
    .times-list {
      list-style: none !important;
    }
    
    .times-list li {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0.7rem !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
      transition: all 0.2s ease !important;
    }
    
    .times-list li:hover {
      background: rgba(215, 109, 119, 0.05) !important;
    }
    
    .times-list li button {
      background: rgba(220, 53, 69, 0.1) !important;
      color: #dc3545 !important;
      border: none !important;
      padding: 0.3rem 0.7rem !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }
    
    .times-list li button:hover {
      background: rgba(220, 53, 69, 0.2) !important;
    }
    
    /* Common Conversions */
    .common-conversions {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      padding: 1.5rem !important;
      margin-bottom: 2rem !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .common-conversions h3 {
      color: #3a1c71 !important;
      margin-bottom: 1.5rem !important;
      text-align: center !important;
      font-size: 1.4rem !important;
    }
    
    .conversion-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
      gap: 1rem !important;
    }
    
    .conversion-card {
      background: rgba(255, 255, 255, 0.8) !important;
      padding: 1rem !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      transition: all 0.3s ease !important;
    }
    
    .conversion-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    .conversion-card.highlight {
      background: linear-gradient(to right, rgba(58, 28, 113, 0.1), rgba(215, 109, 119, 0.1)) !important;
      border: 2px solid rgba(215, 109, 119, 0.3) !important;
    }
    
    .conversion-time {
      font-weight: 700 !important;
      color: #3a1c71 !important;
      font-size: 1.1rem !important;
      margin-bottom: 0.3rem !important;
    }
    
    .conversion-equals {
      color: #666 !important;
      margin: 0.3rem 0 !important;
    }
    
    .conversion-result {
      color: #d76d77 !important;
      font-weight: 600 !important;
    }
    
    /* Supportive Content Section */
    .supportive-content {
      background: rgba(255, 255, 255, 0.9) !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
      padding: 2rem !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .content-section {
      max-width: 900px !important;
      margin: 0 auto !important;
    }
    
    .content-section h3 {
      color: #3a1c71 !important;
      font-size: 1.5rem !important;
      margin: 1.5rem 0 1rem !important;
      position: relative !important;
      padding-bottom: 0.5rem !important;
    }
    
    .content-section h3::after {
      content: '' !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 50px !important;
      height: 3px !important;
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      border-radius: 3px !important;
    }
    
    .content-section p {
      color: #555 !important;
      line-height: 1.6 !important;
      margin-bottom: 1.5rem !important;
    }
    
    .info-card {
      display: flex !important;
      gap: 1rem !important;
      background: rgba(215, 109, 119, 0.05) !important;
      padding: 1.5rem !important;
      border-radius: 12px !important;
      margin: 1.5rem 0 !important;
      border-left: 4px solid #d76d77 !important;
    }
    
    .info-icon {
      color: #d76d77 !important;
      flex-shrink: 0 !important;
    }
    
    .info-content h4 {
      color: #d76d77 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .info-content p {
      margin-bottom: 0 !important;
    }
    
    .facts-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
      gap: 1.5rem !important;
      margin: 1.5rem 0 !important;
    }
    
    .fact-card {
      background: rgba(255, 255, 255, 0.7) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      padding: 1.5rem !important;
      display: flex !important;
      gap: 1rem !important;
      transition: all 0.3s ease !important;
    }
    
    .fact-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    .fact-icon {
      color: #3a1c71 !important;
      flex-shrink: 0 !important;
    }
    
    .fact-content h4 {
      color: #3a1c71 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .fact-content ul {
      padding-left: 1.5rem !important;
      color: #555 !important;
    }
    
    .fact-content li {
      margin-bottom: 0.3rem !important;
    }
    
    .time-zone-table {
      margin: 1.5rem 0 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    }
    
    .table-header {
      display: flex !important;
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      color: white !important;
      font-weight: 600 !important;
    }
    
    .table-row {
      display: flex !important;
      background: white !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .table-row:last-child {
      border-bottom: none !important;
    }
    
    .table-cell {
      flex: 1 !important;
      padding: 1rem !important;
      text-align: center !important;
    }
    
    .tips-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
      gap: 1.5rem !important;
      margin: 1.5rem 0 !important;
    }
    
    .tip-card {
      background: white !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      padding: 1.5rem !important;
      display: flex !important;
      gap: 1rem !important;
      transition: all 0.3s ease !important;
    }
    
    .tip-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    .tip-number {
      width: 40px !important;
      height: 40px !important;
      background: linear-gradient(90deg, #3a1c71, #d76d77) !important;
      color: white !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 700 !important;
      font-size: 1.2rem !important;
      flex-shrink: 0 !important;
    }
    
    .tip-content h4 {
      color: #3a1c71 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .tip-content p {
      margin-bottom: 0 !important;
      font-size: 0.95rem !important;
    }
    
    .use-cases {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
      gap: 1.5rem !important;
      margin: 1.5rem 0 !important;
    }
    
    .use-case-card {
      background: white !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
      padding: 1.5rem !important;
      display: flex !important;
      gap: 1rem !important;
      transition: all 0.3s ease !important;
    }
    
    .use-case-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    .use-case-icon {
      color: #d76d77 !important;
      flex-shrink: 0 !important;
    }
    
    .use-case-content h4 {
      color: #d76d77 !important;
      margin-bottom: 0.5rem !important;
    }
    
    .use-case-content p {
      margin-bottom: 0 !important;
      font-size: 0.95rem !important;
      color: #555 !important;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
      .time-converter-container {
        padding: 1rem !important;
      }
      
      .converter-card, .supportive-content {
        padding: 1.5rem !important;
      }
      
      .current-time-display {
        flex-direction: column !important;
        gap: 1.5rem !important;
      }
      
      .time-arrow {
        transform: rotate(90deg) !important;
        margin: 0.5rem 0 !important;
      }
      
      .time-difference-display {
        flex-direction: column !important;
        align-items: flex-start !important;
      }
      
      .time-input-group, .save-time-inputs {
        flex-direction: column !important;
      }
      
      .time-input, .period-select, .timezone-select, .label-input, .convert-button, .save-button {
        width: 100% !important;
      }
      
      .result-section {
        flex-direction: column !important;
        align-items: flex-start !important;
      }
      
      .business-hours-display, .day-night-info {
        flex-direction: column !important;
      }
      
      .feature-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
      }
      
      .conversion-grid {
        grid-template-columns: 1fr !important;
      }
      
      .facts-grid, .tips-grid, .use-cases {
        grid-template-columns: 1fr !important;
      }
    }