.weather-page{padding:0 0 40px}.current-weather{margin-bottom:30px}.weather-card{background:#fff;border-radius:15px;padding:30px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.weather-header{margin-bottom:20px}.weather-header h2{font-size:24px;font-weight:600;color:var(--secondary-color);margin-bottom:5px}.weather-header .date{color:#666;font-size:14px}.weather-body{display:flex;align-items:center;gap:40px}.weather-icon{font-size:80px;color:#ffc107}.weather-info{flex:1}.temperature{margin-bottom:20px}.temperature .temp{font-size:48px;font-weight:600;color:var(--secondary-color)}.temperature .desc{display:block;color:#666;font-size:16px;margin-top:5px}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.detail-item{display:flex;align-items:center;gap:10px;color:#666}.detail-item i{color:var(--primary-color)}.hourly-forecast{background:#fff;border-radius:15px;padding:25px;margin-bottom:30px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.forecast-slider{display:flex;gap:20px;overflow-x:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:var(--primary-color) #f0f0f0}.forecast-slider::-webkit-scrollbar{height:6px}.forecast-slider::-webkit-scrollbar-track{background:#f0f0f0;border-radius:3px}.forecast-slider::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px}.forecast-item{min-width:100px;text-align:center;padding:15px;background:var(--light-bg);border-radius:10px;transition:transform 0.3s ease}.forecast-item:hover{transform:translateY(-5px)}.forecast-item .time{display:block;color:#666;font-size:14px;margin-bottom:10px}.forecast-item i{font-size:24px;color:#ffc107;margin-bottom:10px}.forecast-item .temp{display:block;font-weight:600;color:var(--secondary-color)}.weekly-forecast{background:#fff;border-radius:15px;padding:25px;margin-bottom:30px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.forecast-day{text-align:center;padding:20px;background:var(--light-bg);border-radius:10px;transition:transform 0.3s ease}.forecast-day:hover{transform:translateY(-5px)}.forecast-day .day{display:block;font-weight:500;color:var(--secondary-color);margin-bottom:15px}.forecast-day i{font-size:36px;color:#ffc107;margin-bottom:15px}.temp-range{margin-bottom:10px}.temp-range .max{color:var(--secondary-color);font-weight:600;font-size:18px}.temp-range .min{color:#666;font-size:14px;margin-left:8px}.forecast-day .desc{display:block;color:#666;font-size:14px}.weather-details{background:#fff;border-radius:15px;padding:25px;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.details-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.detail-card{padding:20px;background:var(--light-bg);border-radius:10px;text-align:center}.detail-card i{font-size:36px;color:var(--primary-color);margin-bottom:15px}.detail-card h3{font-size:16px;font-weight:600;color:var(--secondary-color);margin-bottom:15px}.detail-info p{color:#666;margin-bottom:8px;font-size:14px}.detail-info p:last-child{margin-bottom:0}@media (max-width:992px){.weather-body{flex-direction:column;text-align:center;gap:20px}.details{grid-template-columns:repeat(2,1fr)}.forecast-grid{grid-template-columns:repeat(3,1fr)}.details-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.weather-card{padding:20px}.temperature .temp{font-size:36px}.forecast-grid{grid-template-columns:repeat(2,1fr)}.details-grid{grid-template-columns:1fr}}@media (max-width:480px){.forecast-grid{grid-template-columns:1fr}.details{grid-template-columns:1fr}}