@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{background:#f4f7fc}.container{gap:20px;min-height:100vh;padding:20px;display:flex}.sidebar{background:#fff;border-radius:25px;flex-direction:column;justify-content:space-between;width:240px;padding:25px;display:inline-block;box-shadow:0 10px 30px #0000000f}.logo h2{color:#2d4de0;margin-bottom:40px}.sidebar ul{list-style:none}.sidebar li{cursor:pointer;color:#555;border-radius:15px;align-items:center;gap:12px;margin-bottom:12px;padding:15px;font-weight:500;transition:all .3s;display:flex}.sidebar li:hover{color:#2d4de0;background:#eef3ff}.sidebar li:first-child{color:#fff;background:#4d74ff}.location{background:#f5f7fb;border-radius:15px;margin-top:20px;padding:20px}.location button{color:#fff;cursor:pointer;background:#4d74ff;border:none;border-radius:10px;width:100%;margin-top:10px;padding:10px}.main{flex:1}.header{align-items:center;gap:15px;margin-bottom:25px;display:flex}.header input{background:#fff;border:none;border-radius:30px;outline:none;width:450px;height:50px;padding:0 20px;display:inline-block;box-shadow:0 5px 15px #0000000d}.btn-search{margin-left:-50px}.header-right{align-items:center;gap:15px;display:flex}.header-right button{cursor:pointer;background:#fff;border:none;border-radius:12px;width:50px;height:45px}.header-right button:first-child{color:#fff;background:#4d74ff}.profile{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;display:flex;box-shadow:0 5px 15px #0000000d}.top-section{grid-template-columns:2fr 1fr;gap:20px;display:grid}.weather-card{color:#fff;background:linear-gradient(135deg,#4d74ff,#77a8ff);border-radius:25px;min-height:320px;padding:35px}.weather-card h1{margin:20px 0;font-size:80px}.temp-range{gap:30px;margin-top:20px;display:flex}.details-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.detail-card{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 20px #0000000d}.detail-card h4{color:#777;margin-bottom:10px}.detail-card p{font-size:22px;font-weight:600}.forecast{grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;display:grid}.five-day,.hourly{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 20px #0000000d}.five-day h2,.hourly h2{color:#222;margin-bottom:25px}.forecast-list{justify-content:space-between;gap:15px;display:flex}.forecast-item{text-align:center;cursor:pointer;background:#f7f9ff;border-radius:15px;flex:1;padding:20px 10px;transition:all .3s}.forecast-item:hover{background:#eef3ff;transform:translateY(-5px)}.hourly-list{justify-content:space-between;gap:12px;display:flex}.hour-item{text-align:center;cursor:pointer;background:#f7f9ff;border-radius:15px;flex:1;padding:20px 10px;transition:all .3s}.hour-item:first-child{color:#fff;background:#4d74ff}.hour-item:hover{transform:translateY(-5px)}.bottom-section{grid-template-columns:1fr 1.2fr;gap:20px;margin-top:25px;display:grid}.favorite-cities,.weather-map{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 20px #0000000d}.favorite-cities h2,.weather-map h2{margin-bottom:20px}.cities{grid-template-columns:repeat(2,1fr);gap:15px;display:grid}.city-card{text-align:center;cursor:pointer;background:#f7f9ff;border-radius:15px;padding:20px;transition:all .3s}.city-card:hover{background:#eef3ff;transform:translateY(-5px)}.map{color:#666;background:#dfe9ff;border-radius:18px;justify-content:center;align-items:center;width:100%;height:280px;font-size:22px;font-weight:600;display:flex}@media (width<=1200px){.top-section,.forecast,.bottom-section{grid-template-columns:1fr}}@media (width<=900px){.container{flex-direction:column}.sidebar{width:100%}.header{flex-direction:column;align-items:flex-start;gap:20px}.header input{width:100%}}@media (width<=600px){.forecast-list,.hourly-list,.cities{grid-template-columns:1fr;display:grid}.details-grid{grid-template-columns:1fr}.weather-card h1{font-size:60px}}.header>button{color:#fff;cursor:pointer;background:#4d74ff;border:none;border-radius:25px;height:50px;padding:0 25px;font-size:16px}