/* ===========================
Instagraim.in
style.css
=========================== */

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

/* Reset */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#f5f7fb;

color:#222;

line-height:1.7;

overflow-x:hidden;

}

/* Variables */

:root{

--primary:#2563eb;

--secondary:#7c3aed;

--success:#10b981;

--danger:#ef4444;

--dark:#111827;

--light:#ffffff;

--gray:#6b7280;

--border:#e5e7eb;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:14px;

}

/* Container */

.container{

width:90%;

max-width:1280px;

margin:auto;

}

/* Links */

a{

text-decoration:none;

color:inherit;

}

/* Images */

img{

max-width:100%;

display:block;

}

/* Buttons */

.btn{

display:inline-block;

padding:14px 30px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

/* Header */

header{

position:sticky;

top:0;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.05);

z-index:999;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

font-size:30px;

font-weight:800;

color:var(--primary);

}

.logo span{

color:var(--secondary);

}

nav ul{

display:flex;

gap:30px;

list-style:none;

}

nav a{

font-weight:500;

transition:.3s;

}

nav a:hover{

color:var(--primary);

}

/* Hero */

.hero{

padding:90px 0;

background:linear-gradient(135deg,#eef4ff,#ffffff);

}

.hero .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.hero h1{

font-size:54px;

line-height:1.2;

font-weight:800;

margin-bottom:20px;

}

.hero p{

font-size:18px;

color:var(--gray);

margin-bottom:30px;

}

.hero-form{

background:#fff;

padding:25px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.hero-form textarea{

width:100%;

height:150px;

padding:18px;

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

border-radius:12px;

resize:none;

font-size:16px;

margin-bottom:20px;

}

.hero-form select{

width:100%;

padding:15px;

margin-bottom:15px;

border-radius:10px;

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

font-size:15px;

}

.hero-form button{

width:100%;

padding:18px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.hero-form button:hover{

transform:translateY(-2px);

box-shadow:var(--shadow);

}

/* Hero Image */

.hero-right img{

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

}

@keyframes float{

0%{transform:translateY(0);}

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

100%{transform:translateY(0);}

}
/* ==========================================
POPULAR TOOLS
========================================== */

.popular-tools{

padding:80px 0;

background:#ffffff;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

color:#111827;

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:#6b7280;

max-width:700px;

margin:auto;

}

/* Tool Grid */

.tools-grid{

display:grid;

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

gap:30px;

}

/* Tool Card */

.tool-card{

background:#fff;

border-radius:18px;

padding:30px;

border:1px solid #e5e7eb;

transition:.35s;

box-shadow:0 5px 20px rgba(0,0,0,.04);

}

.tool-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 45px rgba(0,0,0,.12);

border-color:#2563eb;

}

.tool-card .icon{

width:65px;

height:65px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

background:#eef4ff;

margin-bottom:20px;

}

.tool-card h3{

font-size:22px;

margin-bottom:12px;

font-weight:700;

}

.tool-card p{

color:#6b7280;

font-size:15px;

line-height:1.7;

}

/* ==========================================
FEATURES
========================================== */

.features{

padding:80px 0;

background:#f8fafc;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.feature:hover{

transform:translateY(-8px);

}

.feature h3{

margin:20px 0 10px;

font-size:22px;

font-weight:700;

}

.feature p{

color:#6b7280;

}

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

.categories{

padding:90px 0;

background:#ffffff;

}

.category-grid{

display:grid;

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

gap:25px;

}

.category-card{

padding:35px;

border-radius:18px;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

transition:.3s;

}

.category-card:hover{

transform:scale(1.03);

}

.category-card h3{

font-size:24px;

margin-bottom:12px;

}

.category-card p{

opacity:.95;

}

/* ==========================================
TRENDING TOOLS
========================================== */

.trending{

padding:90px 0;

background:#f3f7ff;

}

.trending-grid{

display:grid;

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

gap:30px;

}

.trend-card{

background:#fff;

border-radius:18px;

padding:30px;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.trend-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.badge{

position:absolute;

top:20px;

right:20px;

background:#2563eb;

color:#fff;

padding:6px 14px;

font-size:13px;

border-radius:50px;

font-weight:600;

}

.trend-card h3{

margin:18px 0 12px;

font-size:24px;

font-weight:700;

}

.trend-card p{

font-size:15px;

color:#6b7280;

margin-bottom:20px;

}

.trend-card a{

color:#2563eb;

font-weight:600;

}

.trend-card a:hover{

text-decoration:underline;

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

.stats{
padding:80px 0;
background:#0f172a;
color:#fff;
}

.stats .container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
text-align:center;
}

.stat-box{
padding:40px 20px;
background:rgba(255,255,255,.05);
border-radius:20px;
transition:.4s;
}

.stat-box:hover{
transform:translateY(-10px);
background:#2563eb;
}

.stat-box h2{
font-size:48px;
font-weight:700;
margin-bottom:10px;
}

.stat-box p{
font-size:18px;
opacity:.9;
}

/* ===============================
NEWSLETTER
=============================== */

.newsletter{
padding:100px 0;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
text-align:center;
}

.newsletter-box{
max-width:800px;
margin:auto;
}

.newsletter h2{
font-size:42px;
margin-bottom:20px;
}

.newsletter p{
font-size:18px;
margin-bottom:35px;
}

.newsletter form{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

.newsletter input{
width:420px;
max-width:100%;
padding:18px;
border:none;
border-radius:50px;
font-size:16px;
}

.newsletter button{
padding:18px 35px;
border:none;
border-radius:50px;
background:#111827;
color:#fff;
cursor:pointer;
font-size:16px;
font-weight:600;
transition:.3s;
}

.newsletter button:hover{
background:#000;
}

/* ===============================
FAQ
=============================== */

.faq{
padding:90px 0;
background:#fff;
}

.faq-item{
background:#f8fafc;
margin-bottom:20px;
padding:25px;
border-radius:15px;
border-left:5px solid #2563eb;
}

.faq-item h3{
font-size:22px;
margin-bottom:12px;
}

.faq-item p{
color:#6b7280;
line-height:1.8;
}

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

footer{
background:#111827;
color:#fff;
padding:80px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
}

.footer-column h3{
margin-bottom:20px;
font-size:24px;
}

.footer-column ul{
list-style:none;
}

.footer-column ul li{
margin-bottom:12px;
}

.footer-column a{
color:#d1d5db;
transition:.3s;
}

.footer-column a:hover{
color:#fff;
padding-left:5px;
}

footer hr{
margin:50px 0 25px;
border:none;
height:1px;
background:#374151;
}

.copyright{
text-align:center;
color:#9ca3af;
}

/* ===============================
SCROLLBAR
=============================== */

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

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:20px;
}

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

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

@media(max-width:991px){

.hero .container{
grid-template-columns:1fr;
text-align:center;
}

.hero h1{
font-size:42px;
}

nav{
display:none;
}

.tools-grid,
.feature-grid,
.category-grid,
.trending-grid,
.footer-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.hero{
padding:60px 0;
}

.hero h1{
font-size:34px;
}

.section-title h2{
font-size:32px;
}

.newsletter h2{
font-size:30px;
}

.tools-grid,
.feature-grid,
.category-grid,
.trending-grid,
.footer-grid{
grid-template-columns:1fr;
}

.btn,
.hero-form button{
width:100%;
}

}

@media(max-width:480px){

.container{
width:94%;
}

.hero h1{
font-size:28px;
}

.hero p{
font-size:16px;
}

.section-title h2{
font-size:28px;
}

.stat-box h2{
font-size:36px;
}

}