/* ======================================================
   PeriodicX v1
   Main UI
   Developed by Aditya Jaiswal
====================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:"Poppins",sans-serif;
}

body{

background:#0f172a;
color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#00e5ff;

border-radius:20px;

}

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

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

height:75px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 60px;

background:rgba(15,23,42,.92);

backdrop-filter:blur(15px);

z-index:9999;

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

}

.logo{

font-size:28px;

font-weight:bold;

color:#00e5ff;

}

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#00e5ff;

}

#themeBtn{

padding:10px 18px;

border:none;

border-radius:10px;

background:#00e5ff;

cursor:pointer;

font-size:18px;

}

/* =========================
        Hero
========================= */

.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:100px 20px;

background:

linear-gradient(rgba(15,23,42,.8),rgba(15,23,42,.9)),
url("../images/bg.jpg");

background-size:cover;

background-position:center;

}

.hero h1{

font-size:60px;

margin-bottom:25px;

max-width:900px;

}

.hero p{

max-width:700px;

font-size:22px;

line-height:1.8;

color:#ddd;

}

.primary-btn{

margin-top:35px;

padding:18px 35px;

font-size:20px;

border:none;

border-radius:12px;

background:#00e5ff;

cursor:pointer;

transition:.3s;

font-weight:bold;

}

.primary-btn:hover{

transform:translateY(-6px);

box-shadow:0 0 30px cyan;

}

/* =========================
      Search
========================= */

.search-section{

display:flex;

justify-content:center;

padding:60px 20px;

}

.search-section input{

width:700px;

max-width:95%;

padding:18px;

font-size:18px;

border:none;

border-radius:12px;

background:#1e293b;

color:white;

outline:none;

}

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

section{

padding:80px 30px;

}

section h2{

text-align:center;

margin-bottom:35px;

font-size:38px;

color:#00e5ff;

}

/* =========================
     Dashboard
========================= */

.dashboard{

padding:80px 20px;

}

.stats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

}

.stats div{

background:#1e293b;

padding:30px;

border-radius:20px;

text-align:center;

transition:.3s;

}

.stats div:hover{

transform:translateY(-8px);

box-shadow:0 0 25px cyan;

}

.stats h3{

font-size:50px;

color:#00e5ff;

margin-bottom:10px;

}

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

footer{

padding:60px;

text-align:center;

background:#020617;

margin-top:60px;

}

footer h2{

margin-bottom:20px;

color:#00e5ff;

}

footer p{

margin:10px 0;

color:#bbb;

}

/* =========================
      Toast
========================= */

.toast{

position:fixed;

bottom:30px;

right:30px;

background:#00e5ff;

color:#111;

padding:18px 25px;

border-radius:12px;

font-weight:bold;

opacity:0;

transform:translateY(40px);

transition:.4s;

z-index:99999;

}

.toast.show{

opacity:1;

transform:translateY(0);

}