.weather-section { background: linear-gradient(rgba(10, 10, 25, 0.85), rgba(10, 10, 25, 0.85)),url('https://wallpapers.com/images/hd/perfect-weather-with-gradient-sky-ym0nn79vhoqg34v3.jpg') center/cover no-repeat fixed;color: #fff;padding: 80px 20px;}
.weather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;}
.weather-card { background: var(--color-surface); padding: 2rem; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; animation: fadeInUp 0.8s ease; position: relative;}
.weather-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15);}
.weather-icon { font-size: 4rem; margin-bottom: 1rem; animation: float 3s ease-in-out infinite;}
.weather-card h4 { font-size: 1.6rem; margin-bottom: 1rem; color: #3489ff;}
.temperature { font-size: 1.3rem; font-weight: bold; color: #FF6B35; margin-bottom: 1rem;}
.recommendation { margin-top: 1rem; padding: 0.8rem; border-radius: 10px; font-weight: 600;}
.best-time .recommendation { background: var(--color-bg-3); color: #059669;}
.winter-card.best-time { border: 3px solid #059669; animation: glow 2s ease-in-out infinite alternate;}
.weather-header {
  text-align: center;
  margin-bottom: 2.7rem;
}

.weather-live-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.57em;
  margin-top: 1.1rem;
  font-size: 1.12rem;
  color: #106c94;
  background: linear-gradient(90deg, #f7f7ea 60%, #e6f2fa 100%);
  border-radius: 22px;
  border: 1px solid #b6e6ff;
  padding: 0.7em 1.34em;
  box-shadow: 0 2px 16px 0 rgba(54,112,173,0.065);
  text-decoration: none;
  font-weight: 500;
  transition:
    background 0.2s,
    color 0.16s,
    box-shadow 0.22s,
    border 0.17s,
    transform 0.17s;
}

.weather-live-link:hover,
.weather-live-link:focus {
  background: linear-gradient(90deg, #e5faff 55%, #c5eaff 100%);
  color: #1871b9;
  box-shadow: 0 4px 24px 0 rgba(38,172,246,0.15);
  border-color: #8fd3ff;
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

.weather-link-icon {
  font-size: 1.25em;
  vertical-align: middle;
}

.section-header .section-title {
  margin-bottom: 0.7rem;
}

.section-header .section-subtitle {
  font-size: 1.09rem;
  font-weight: 500;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  display: inline;
}