/* ============================================
   RESPONSIVE MOBILES (< 768px)
   ============================================ */

@media (max-width: 600px) {
  .notification { max-width: 95%; font-size: 14px; padding: 12px 40px 12px 14px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 16px; }
  .search-card { padding: 20px; }
  .result-card { padding: 16px; }
  .price { font-size: 20px; }
  .slider-slide .card-body { padding: 16px; }
  .slider-slide .card-body h4 { font-size: 18px; }
  .slider-slide .card-body p { font-size: 13px; }
  .date-picker-container { width: 280px !important; padding: 16px !important; left: -20px !important; }
  .date-picker-day { padding: 6px 2px !important; font-size: 13px !important; }
  #g2t-notifications { top: calc(var(--header-height, 60px) + 4px); width: 98%; padding: 0 4px; }
  #g2t-notifications .notification { font-size: 13px; padding: 10px 40px 10px 12px; border-radius: 6px; }
  #g2t-notifications .notification-icon { font-size: 16px; }
  #g2t-notifications .notification-message { font-size: 13px; }
}

@media (max-width: 417px) {
  .hero-cta { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 386px) {
  .hero-cta { font-size: 11px; }
}

@media (max-width: 711px) {
  .hero-inner { margin-right: 15px; margin-left: 15px; }
}