/* ======================================
        HOME.CSS
====================================== */

/* HERO */

.hero{

padding:90px 0;

background:linear-gradient(135deg,#2563eb,#1d4ed8,#0b1120);

overflow:hidden;

}

.hero .container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero h1{

font-size:60px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}

.hero h1 span{

color:#facc15;

}

.hero p{

font-size:19px;

line-height:1.8;

color:#dbeafe;

margin-bottom:35px;

max-width:560px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:520px;

animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-18px);}
100%{transform:translateY(0);}

}

/* ======================
FEATURE
====================== */

.feature{

margin-top:-60px;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.feature-card{

background:#111827;

padding:30px;

border-radius:20px;

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

transition:.3s;

text-align:center;

}

.feature-card:hover{

transform:translateY(-8px);

border-color:#2563eb;

}

.feature-card i{

font-size:42px;

margin-bottom:20px;

color:#3b82f6;

}

.feature-card h3{

font-size:22px;

margin-bottom:10px;

}

.feature-card p{

color:#cbd5e1;

}

/* ======================
CATEGORY
====================== */

.category{

padding:90px 0;

}

.category-grid{

display:grid;

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

gap:25px;

}

.category-card{

background:#111827;

padding:35px;

border-radius:20px;

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

transition:.35s;

cursor:pointer;

text-align:center;

}

.category-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 35px rgba(37,99,235,.25);

border-color:#3b82f6;

}

.category-card img{

width:72px;

height:72px;

margin:auto;

margin-bottom:20px;

}

.category-card h3{

font-size:24px;

margin-bottom:12px;

}

.category-card p{

color:#cbd5e1;

}

/* ======================
STATS
====================== */

.stats{

padding:90px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.stat{

background:#111827;

padding:35px;

border-radius:20px;

text-align:center;

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

}

.stat h2{

font-size:42px;

color:#3b82f6;

margin-bottom:10px;

}

.stat p{

color:#cbd5e1;

}

/* ======================
WHY
====================== */

.why{

padding:90px 0;

}

.why-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.why-card{

display:flex;

gap:18px;

align-items:flex-start;

padding:28px;

background:#111827;

border-radius:20px;

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

transition:.3s;

}

.why-card:hover{

border-color:#2563eb;

}

.why-card i{

font-size:34px;

color:#22c55e;

}

.why-card h3{

font-size:22px;

margin-bottom:8px;

}

.why-card p{

color:#cbd5e1;

line-height:1.7;

}

/* ======================
RESPONSIVE
====================== */

@media(max-width:992px){

.hero .container{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

}

.feature-grid,

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.why-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hero{

padding:60px 0;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.feature-grid,

.category-grid,

.stats-grid{

grid-template-columns:1fr;

}

}
/* ===========================
REVIEW
=========================== */

.review{

padding:90px 0;

}

.review-grid{

display:grid;

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

gap:30px;

}

.review-card{

background:#111827;

padding:30px;

border-radius:20px;

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

transition:.3s;

}

.review-card:hover{

transform:translateY(-6px);

}

.review-user{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.review-user img{

width:60px;

height:60px;

border-radius:50%;

}

/* ===========================
FOOTER
=========================== */

footer{

background:#111827;

padding:70px 0 30px;

margin-top:80px;

}

.footer-grid{

display:grid;

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

gap:35px;

}

.footer-grid h3{

margin-bottom:18px;

}

.footer-grid a{

display:block;

margin-bottom:10px;

color:#cbd5e1;

transition:.3s;

}

.footer-grid a:hover{

color:#3b82f6;

}

.footer-bottom{

margin-top:40px;

padding-top:25px;

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

text-align:center;

color:#94a3b8;

}