/* =========================================
RESET
========================================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Epilogue',sans-serif;
background:#ffffff;
color:#232323;
line-height:1.8;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}

/* =========================================
GLOBAL
========================================= */

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:0.3s ease;
}





/* =========================================
HEADER
========================================= */

.site-header{
width:100%;
background:#ffffff;
border-bottom:1px solid #f1f1f1;
position:sticky;
top:0;
z-index:1000;
}

.header-inner{
max-width:1200px;
margin:0 auto;
padding:22px 20px;

display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
font-size:1.65rem;
font-weight:800;
color:#111111;
text-decoration:none;
letter-spacing:-0.5px;
}

.main-nav{
display:flex;
align-items:center;
gap:34px;
}

.main-nav a{
font-size:.95rem;
font-weight:600;
color:#333333;
text-decoration:none;
transition:.3s ease;
}

.main-nav a:hover{
color:#00AEEF;
}

/* MOBILE HEADER */

@media (max-width:768px){

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

.main-nav{
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.logo{
font-size:1.45rem;
}

}







/* =========================================
BLOG HERO
========================================= */

.blog-hero{
padding:110px 20px 80px;
text-align:center;
background:#ffffff;
}

.blog-hero h1{
font-size:3.2rem;
font-weight:800;
line-height:1.2;
letter-spacing:-1px;
margin-bottom:28px;
color:#111111;
}

.blog-hero p{
max-width:880px;
margin:0 auto;
font-size:1.08rem;
line-height:2;
color:#5f5f5f;
}

/* =========================================
BLOG GRID
========================================= */

.blog-grid{
max-width:1200px;
margin:0 auto;
padding:10px 20px 100px;

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

/* =========================================
BLOG CARD
========================================= */

.blog-card{
background:#ffffff;
border:1px solid #f1f1f1;
border-radius:24px;
overflow:hidden;

box-shadow:0 12px 32px rgba(0,0,0,0.05);

transition:all .35s ease;
}

.blog-card:hover{
transform:translateY(-6px);

box-shadow:0 20px 45px rgba(0,0,0,0.10);
}

.blog-card img{
width:100%;
height:240px;
object-fit:cover;
background:#f7f7f7;
}

/* =========================================
CARD CONTENT
========================================= */

.blog-content{
padding:32px;
}

.blog-category{
display:inline-block;
margin-bottom:18px;

font-size:.78rem;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;

color:#00AEEF;
}

.blog-content h2{
font-size:1.5rem;
font-weight:800;
line-height:1.45;
margin-bottom:18px;
color:#111111;
}

.blog-content p{
font-size:1rem;
line-height:1.9;
color:#5c5c5c;
margin-bottom:28px;
}

/* =========================================
BUTTON
========================================= */

.read-btn{
display:inline-block;

background:#00AEEF;
color:#ffffff;

padding:13px 28px;

border-radius:50px;

font-size:.92rem;
font-weight:700;

transition:all .3s ease;
}

.read-btn:hover{
background:#0095d1;
color:#ffffff;

transform:translateY(-2px);
}

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

.category-section{
max-width:1200px;
margin:0 auto;
padding:0 20px 90px;
text-align:center;
}

.category-section h3{
font-size:2.2rem;
font-weight:800;
margin-bottom:40px;
color:#111111;
}

.category-tags{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:16px;
}

.category-tags a{
display:inline-block;

padding:13px 24px;

border:2px solid #00AEEF;

border-radius:50px;

color:#00AEEF;

font-weight:600;
font-size:.95rem;

transition:all .3s ease;
}

.category-tags a:hover{
background:#00AEEF;
color:#ffffff;
}

/* =========================================
EDITORIAL NOTE
========================================= */

.editorial-note{
max-width:920px;
margin:0 auto;
padding:0 20px 90px;
text-align:center;
}

.editorial-note p{
color:#666666;
line-height:2;
font-size:.97rem;
}

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

.main-footer{
background:#f8f6f2;
padding:75px 20px 35px;
border-top:1px solid #ececec;
}

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

.footer-container{
max-width:1180px;
margin:0 auto;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px;
}

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

.footer-column h3{
font-size:1.6rem;
font-weight:800;
margin-bottom:24px;
color:#111111;
}

.footer-column h4{
font-size:1.2rem;
font-weight:700;
margin-bottom:24px;
color:#111111;
}

.footer-column p{
font-size:1rem;
line-height:2;
color:#555555;
}

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

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

.footer-column ul li a{
font-size:1rem;
color:#555555;
}

.footer-column ul li a:hover{
color:#00AEEF;
}

/* =========================================
DISCLAIMER
========================================= */

.footer-disclaimer{
max-width:1180px;
margin:55px auto 0;
padding-top:30px;
border-top:1px solid #e3e3e3;
}

.footer-disclaimer-inner p{
font-size:.93rem;
line-height:1.9;
color:#666666;
margin-bottom:18px;
}

/* =========================================
COPYRIGHT
========================================= */

.footer-bottom{
max-width:1180px;
margin:40px auto 0;
padding-top:25px;

border-top:1px solid #e5e5e5;

text-align:center;
}

.footer-bottom p{
font-size:.82rem;
letter-spacing:1px;
text-transform:uppercase;
color:#999999;
}

/* =========================================
MOBILE
========================================= */

@media (max-width:992px){

.footer-container{
grid-template-columns:repeat(2,1fr);
gap:45px;
}

}

@media (max-width:768px){

.blog-hero{
padding:80px 20px 60px;
}

.blog-hero h1{
font-size:2.2rem;
}

.blog-hero p{
font-size:1rem;
line-height:1.9;
}

.blog-content{
padding:28px;
}

.blog-content h2{
font-size:1.3rem;
}

.footer-container{
grid-template-columns:1fr;
gap:35px;
}

.main-footer{
padding:60px 20px 30px;
}

.footer-column h3{
font-size:1.45rem;
}

.category-section h3{
font-size:1.8rem;
}

}