/* ===============================
   Google Font
================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* ===============================
   Variables
================================ */

:root {
  /* 
    --primary:#38BDF8;
    --secondary:#0EA5E9;
    --dark:#0F172A;
    --card:#1E293B;
    --cardHover:#334155;
    --text:#F8FAFC;
    --gray:#94A3B8;
    --danger:#EF4444;
    --success:#22C55E; */

  --bg: #0f172a;
  --card: #1e293b;
  --text: #f8fafc;
  --gray: #94a3b8;
  --primary: #38bdf8;
}
.light-mode {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --gray: #64748b;
  --primary: #0ea5e9;
}

/* ===============================
   Reset
================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;

  /* background:linear-gradient(135deg,#0F172A,#1E293B); */
  background: var(--bg);

  color: var(--text);

  transition: 0.4s;

  color: var(--text);

  overflow-x: hidden;
}

/* ===============================
   Scrollbar
================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #111827;
}

::-webkit-scrollbar-thumb {
  background: var(--primary);

  border-radius: 30px;
}

/* ===============================
   Loader
================================ */

.loader {
  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.9);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 999999;
}

/* ===============================
   Navbar
================================ */

.custom-navbar {
  background: rgba(15, 23, 42, 0.7);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.4s;

  padding: 15px 0;
}

.logo {
  color: white !important;

  font-size: 30px;

  font-weight: 700;
}

.logo span {
  color: var(--primary);
}

.logo i {
  color: var(--primary);

  margin-right: 8px;
}

.navbar-nav .nav-link {
  color: var(--gray);

  margin: 0 12px;

  font-weight: 500;

  position: relative;

  transition: 0.3s;
}

.navbar-nav .nav-link:hover {
  color: white;
}

.navbar-nav .nav-link.active {
  color: white;
}

.navbar-nav .nav-link::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 2px;

  background: var(--primary);

  transition: 0.3s;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

.navbar-nav .nav-link.active::after {
  width: 100%;
}

/* ===============================
   Buttons
================================ */

.theme-btn {
  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: var(--card);

  color: white;

  transition: 0.3s;
}

.theme-btn:hover {
  background: var(--primary);

  transform: rotate(20deg);
}

.location-btn {
  border: none;

  padding: 11px 20px;

  border-radius: 50px;

  background: var(--primary);

  color: white;

  font-weight: 600;

  transition: 0.3s;
}

.location-btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(56, 189, 248, 0.35);
}
/* ===============================
   Hero Section
================================ */

.hero {
  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 140px 0 80px;
}

.hero-subtitle {
  display: inline-block;

  color: var(--primary);

  font-size: 18px;

  font-weight: 600;

  margin-bottom: 20px;
}

.hero-title {
  font-size: 60px;

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: 20px;
}

.hero-text {
  color: var(--gray);

  font-size: 18px;

  line-height: 1.8;

  max-width: 550px;
}

/* ===============================
   Search Box
================================ */
.input-wrapper{
    position: relative;
}

.input-wrapper input{
    width:100%;
    height:60px;
    padding-right:70px;
}

.input-wrapper button{
    position:absolute;
    top:50%;
    right:7px;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
}

/* .search-box {
  margin-top: 35px;

  position: relative;

  max-width: 500px;
}

.search-box input {
  height: 60px;

  border-radius: 50px;

  border: none;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(15px);

  color: white;

  padding-left: 25px;

  padding-right: 80px;

  font-size: 18px;
}

.search-box input:focus {
  background: rgba(255, 255, 255, 0.12);

  color: white;

  box-shadow: none;

  border: 1px solid var(--primary);
}

.search-box input::placeholder {
  color: #cbd5e1;
}

.search-box button  {
  position: absolute;

  top: 7px;

  right: 7px;

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  transition: 0.3s;
}

.search-box button:hover {
  transform: scale(1.08);
} */

/* ===============================
   Error Box
================================ */

#errorBox {
  border-radius: 15px;
}

/* ===============================
   Current Weather Card
================================ */

.current-card {
  /* background:rgba(255,255,255,.08); */
  background: var(--card);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 30px;

  padding: 35px;

  transition: 0.4s;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.current-card:hover {
  transform: translateY(-10px);
}

.current-card h2 {
  font-size: 32px;

  font-weight: 700;
}

.current-card p {
  color: var(--gray);

  margin: 0;
}

.current-card img {
  width: 120px;

  animation: float 3s infinite ease-in-out;
}

.current-card h1 {
  font-size: 80px;

  font-weight: 700;

  margin: 15px 0;
}

.current-card h4 {
  color: var(--primary);

  font-weight: 600;
}

.current-card small {
  color: var(--gray);
}

/* ===============================
   Section Heading
================================ */

.section-heading {
  text-align: center;

  margin-bottom: 50px;
}

.section-heading h2 {
  font-size: 40px;

  font-weight: 700;

  margin-bottom: 10px;
}

.section-heading p {
  color: var(--gray);

  font-size: 17px;
}

/* ===============================
   Float Animation
================================ */

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ===============================
   Highlights
================================ */

.highlights {
  padding: 100px 0;
}

.highlight-card {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);

  border-radius: 25px;

  padding: 35px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.4s;

  height: 100%;
}

.highlight-card:hover {
  transform: translateY(-12px);

  background: rgba(255, 255, 255, 0.12);
}

.highlight-card i {
  font-size: 42px;

  color: var(--primary);

  margin-bottom: 20px;
}

.highlight-card h5 {
  color: var(--gray);

  margin-bottom: 15px;
}

.highlight-card h2 {
  font-size: 38px;

  font-weight: 700;
}

/* ===============================
   Forecast
================================ */

.forecast {
  padding: 100px 0;
}

.forecast-card {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);

  border-radius: 25px;

  padding: 30px;

  text-align: center;

  transition: 0.4s;

  height: 100%;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.forecast-card:hover {
  transform: translateY(-10px);
}

.forecast-card img {
  width: 80px;

  margin: 15px 0;
}

.forecast-card h3 {
  font-size: 24px;

  margin-bottom: 15px;
}

.forecast-card h4 {
  font-size: 34px;

  margin: 10px 0;
}

.forecast-card p {
  color: var(--gray);
}

/* ===============================
   Hourly Forecast
================================ */

.hourly {
  padding: 100px 0;
}

.hourly-container {
  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding-bottom: 15px;
}

.hourly-container::-webkit-scrollbar {
  height: 7px;
}

.hourly-container::-webkit-scrollbar-thumb {
  background: var(--primary);

  border-radius: 20px;
}

.hour-card {
  min-width: 140px;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 20px;

  padding: 25px;

  text-align: center;

  flex-shrink: 0;

  transition: 0.3s;
}

.hour-card:hover {
  transform: translateY(-8px);
}

.hour-card img {
  width: 60px;

  margin: 15px 0;
}

.hour-card h6 {
  font-size: 18px;

  margin-bottom: 10px;
}

.hour-card h4 {
  font-size: 28px;
}

/* ===============================
   Weather Details
================================ */

.weather-details {
  padding: 100px 0;
}

.detail-card {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);

  border-radius: 25px;

  padding: 35px;

  text-align: center;

  transition: 0.4s;

  border: 1px solid rgba(255, 255, 255, 0.08);

  height: 100%;
}

.detail-card:hover {
  transform: translateY(-10px);
}

.detail-card i {
  font-size: 40px;

  color: var(--primary);

  margin-bottom: 18px;
}

.detail-card h5 {
  color: var(--gray);

  margin-bottom: 12px;
}

.detail-card h2 {
  font-size: 34px;

  font-weight: 700;
}

/* ===============================
   Air Quality
================================ */

.air-quality {
  padding: 100px 0;
}

.air-card {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);

  border-radius: 25px;

  padding: 35px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.4s;
}

.air-card:hover {
  transform: translateY(-10px);
}

.air-card h5 {
  color: var(--gray);

  margin-bottom: 15px;
}

.air-card h2 {
  font-size: 34px;

  font-weight: 700;

  color: var(--primary);
}
/* ===============================
   Astronomy
================================ */

.astronomy {
  padding: 100px 0;
}

.astro-card {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);

  border-radius: 25px;

  text-align: center;

  padding: 40px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.4s;

  height: 100%;
}

.astro-card:hover {
  transform: translateY(-10px);
}

.astro-card i {
  font-size: 45px;

  color: var(--primary);

  margin-bottom: 20px;
}

.astro-card h4 {
  color: var(--gray);

  margin-bottom: 15px;
}

.astro-card h2 {
  font-size: 36px;

  font-weight: 700;
}

/* ===============================
   Footer
================================ */

.footer {
  margin-top: 100px;

  background: #0b1120;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer p {
  color: var(--gray);
}

.social-links {
  display: flex;

  justify-content: center;

  gap: 20px;
}

.social-links a {
  width: 50px;

  height: 50px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(255, 255, 255, 0.08);

  color: white;

  font-size: 22px;

  transition: 0.3s;

  text-decoration: none;
}

.social-links a:hover {
  background: var(--primary);

  transform: translateY(-6px);
}

/* ===============================
   Utilities
================================ */

img {
  max-width: 100%;

  display: block;
}

section {
  position: relative;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

.d-none {
  display: none !important;
}
.sunny {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.cloudy {
  background: linear-gradient(135deg, #334155, #475569);
}

.rain {
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.night {
  background: linear-gradient(135deg, #020617, #0f172a);
}
.recent-searches {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;
}

.recent-searches button {
  border: none;

  background: #38bdf8;

  color: white;

  border-radius: 30px;

  padding: 8px 18px;

  transition: 0.3s;
}

.recent-searches button:hover {
  transform: translateY(-3px);
}