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

body{
font-family:'Inter',sans-serif;
background:#f8fafc;
color:#111;
line-height:1.7;
}

/* HEADER */

.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 100px;
background:white;
border-bottom:1px solid #eee;
}

/* LOGO */

.logo img{
height:240px;
width:auto;
}

/* NAVIGATION */

nav{
display:flex;
gap:40px;
}

nav a{
text-decoration:none;
color:#333;
font-weight:500;
font-size:16px;
transition:0.2s;
}

nav a:hover{
color:#2563eb;
}

/* LANGUAGE */

.language select{
padding:8px 12px;
border-radius:6px;
border:1px solid #ddd;
font-family:Inter;
}

/* HERO */

.hero{
text-align:center;
padding:160px 20px;
background:linear-gradient(135deg,#2563eb,#1e3a8a);
color:white;
}

.hero h1{
font-size:60px;
font-weight:700;
margin-bottom:20px;
}

.hero p{
font-size:22px;
margin-bottom:35px;
opacity:0.9;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.hero-btn{
background:white;
color:#2563eb;
padding:16px 36px;
border-radius:10px;
text-decoration:none;
font-weight:600;
box-shadow:0 15px 35px rgba(0,0,0,0.2);
transition:0.2s;
}

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

/* ADS */

.ad{
width:100%;
text-align:center;
padding:35px;
margin:40px 0;
background:#f1f5f9;
border:1px dashed #ddd;
color:#777;
font-size:14px;
}

/* SECTIONS */

.categories{
padding:90px 100px;
}

.templates{
padding:90px 100px;
background:white;
}

.categories h2,
.templates h2{
font-size:38px;
margin-bottom:40px;
}

/* GRID */

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

/* CATEGORY CARD */

.card{
background:white;
padding:45px;
border-radius:14px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
font-weight:600;
transition:0.2s;
text-decoration:none;
color:#111;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

/* TEMPLATE CARD */

.template-card{
padding:35px;
border-radius:14px;
background:#f1f5f9;
transition:0.2s;
display:block;
text-decoration:none;
color:inherit;
}

.template-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.template-card h3{
margin-bottom:10px;
font-size:22px;
}

.template-card p{
font-size:16px;
color:#444;
}

.template-card a{
display:inline-block;
margin-top:10px;
color:#2563eb;
text-decoration:none;
font-weight:600;
}

/* BLOG ARTICLE STYLE */

.templates p{
font-size:18px;
line-height:1.8;
color:#333;
margin-bottom:20px;
max-width:800px;
}

.templates h2{
font-size:30px;
margin-top:40px;
margin-bottom:20px;
color:#111;
}

.templates ul{
margin-left:20px;
margin-bottom:20px;
}

.templates li{
font-size:18px;
margin-bottom:10px;
}

.templates a{
text-decoration:none;
color:#2563eb;
font-weight:500;
}

.templates a:hover{
color:#1e40af;
}

/* ARTICLE CONTAINER */

.templates{
max-width:900px;
margin:auto;
}

/* FOOTER */

footer{
text-align:center;
padding:60px;
background:#111;
color:white;
margin-top:60px;
}

/* RESPONSIVE */

@media (max-width:1000px){

.header{
padding:20px 40px;
flex-direction:column;
gap:20px;
}

.logo img{
height:180px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.categories,
.templates{
padding:60px 30px;
}

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

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

}