/* RESET */

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

body{
font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:#fafafa;
color:#222;
line-height:1.6;
}


/* CONTAINER */

.container{
width:92%;
max-width:1250px;
margin:auto;
}


/* GRID */

.blog-grid{

display:grid;

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

gap:22px;

padding:20px 0 40px;

}


/* CARD */

.blog-card{

background:white;

border-radius:14px;

padding:10px;

display:flex;

flex-direction:column;

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

transition:.25s;

height:100%;

}


/* subtle hover */

.blog-card:hover{

transform:translateY(-4px);

box-shadow:0 16px 40px rgba(0,0,0,.08);

}



/* IMAGE */

.blog-card img{

width:100%;

/* keeps correct ratio */
aspect-ratio:3/4;

/* makes image appear bigger */
object-fit:contain;

/* reduce empty space */
padding:2px;

/* light background improves contrast */
background:#fff;

border-radius:8px;

/* ensures consistent visual height */
max-height:360px;

}



/* CONTENT */

.blog-content{

display:flex;

flex-direction:column;

flex-grow:1;

padding:6px 2px 2px;

}



/* TITLE */

.blog-content h2{

font-size:15px;

font-weight:600;

margin-bottom:5px;

line-height:1.3;

}



/* LINK */

.blog-content h2 a{

text-decoration:none;

color:#111;

}



/* DESCRIPTION */

.blog-content p{

font-size:13px;

color:#666;

margin-bottom:6px;

line-height:1.45;

}

/* BUTTONS */

.btn-group{

display:flex;

gap:8px;

margin-top:auto;

}

.btn-group{

display:flex;

gap:6px;

margin-top:8px;

flex-wrap:wrap;

}


/* INFO BUTTON */

.read-btn{

background:#f3f3f3;

padding:6px 10px;

font-size:12px;

border-radius:5px;

text-decoration:none;

color:#333;

display:inline-block;

white-space:nowrap;

transition:.2s;

}


.read-btn:hover{

background:#e5e5e5;

}



/* BUY BUTTON */

.buy-btn{

background:#111;

color:white;

padding:6px 10px;

font-size:12px;

border-radius:5px;

text-decoration:none;

display:inline-block;

white-space:nowrap;

transition:.2s;

}


.buy-btn:hover{

background:#000;

}



/* MOBILE */

@media(max-width:600px){

.read-btn,
.buy-btn{

font-size:11px;

padding:5px 8px;

}

}

/* PAGINATION */

.pagination{

text-align:center;

margin:40px 0 60px;

}

.pagination a{

display:inline-block;

padding:8px 14px;

margin:4px;

border:1px solid #ddd;

border-radius:6px;

text-decoration:none;

font-size:14px;

color:#333;

}

.pagination a:hover{

background:#111;

color:white;

border-color:#111;

}



/* TABLET */

@media(max-width:900px){

.blog-grid{

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

gap:18px;

}

}



/* MOBILE */

@media(max-width:600px){

.blog-grid{

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

gap:14px;

}

.blog-card{

padding:8px;

}

.blog-content h2{

font-size:14px;

}

.blog-content p{

display:none;

}

}



/* VERY SMALL MOBILE */

@media(max-width:420px){

.blog-grid{

grid-template-columns:1fr 1fr;

gap:10px;

}

}



/* LARGE SCREEN */

@media(min-width:1400px){

.blog-grid{

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

}

}



/* EXTRA LARGE */

@media(min-width:1700px){

.blog-grid{

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

}

}
/* NAVBAR */

.navbar{

background:white;

border-bottom:1px solid #eee;

position:sticky;

top:0;

z-index:1000;

}


.nav-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

padding:12px 0;

}


/* LOGO */

.logo img{

height:40px;

}


/* MENU */

.nav-menu{

display:flex;

gap:22px;

}


.nav-menu a{

text-decoration:none;

color:#222;

font-size:14px;

font-weight:600;

}


.nav-menu a:hover{

color:#000;

}


/* MOBILE MENU ICON */

.menu-icon{

display:none;

flex-direction:column;

cursor:pointer;

gap:4px;

}


.menu-icon span{

width:24px;

height:3px;

background:#111;

display:block;

border-radius:2px;

}


/* HIDE CHECKBOX */

#menu-toggle{

display:none;

}


/* MOBILE */

@media(max-width:900px){

.menu-icon{

display:flex;

}


.nav-menu{

position:absolute;

top:60px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

padding:20px 0;

gap:16px;

border-bottom:1px solid #eee;

display:none;

}


/* show menu when checked */

#menu-toggle:checked ~ .nav-menu{

display:flex;

}

}

/* PAGE WIDTH */

.container{

width:92%;

max-width:950px;

margin:auto;

}


/* ARTICLE CARD */

.single-blog{

background:white;

margin-top:30px;

padding:40px;

border-radius:14px;

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

}


/* TITLE */

.single-blog h1{

font-size:28px;

margin-bottom:18px;

line-height:1.35;

}


/* SUB HEADINGS */

.single-blog h2{

font-size:20px;

margin-top:30px;

margin-bottom:10px;

}


/* TEXT */

.single-blog p{

margin-bottom:16px;

font-size:15px;

color:#444;

line-height:1.7;

}


/* LIST */

.single-blog ul{

margin-left:18px;

margin-bottom:20px;

}


.single-blog li{

margin-bottom:6px;

}


/* TABLE */

table{

width:100%;

border-collapse:collapse;

margin:25px 0;

font-size:14px;

background:white;

}


th{

background:#f8f8f8;

font-weight:600;

}


th,td{

border:1px solid #eee;

padding:10px;

text-align:left;

}


/* BUTTON */

.buy-btn{

display:inline-block;

background:#111;

color:white;

padding:12px 20px;

border-radius:8px;

text-decoration:none;

margin-top:20px;

font-size:15px;

}


.buy-btn:hover{

background:#000;

}



/* TABLET */

@media(max-width:900px){

.single-blog{

padding:25px;

}

.single-blog h1{

font-size:24px;

}

}



/* MOBILE */

@media(max-width:600px){

.container{

width:94%;

}

.single-blog{

padding:20px;

}

.single-blog h1{

font-size:22px;

}

.single-blog h2{

font-size:18px;

}

table{

font-size:13px;

}

th,td{

padding:8px;

}

}



/* SMALL MOBILE */

@media(max-width:420px){

.single-blog{

padding:16px;

}

.single-blog h1{

font-size:20px;

}

}

/* POPUP BACKGROUND */

.img-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.85);

z-index:9999;

justify-content:center;

align-items:center;

padding:20px;

}


/* IMAGE */

.img-popup img{

max-width:95%;

max-height:90vh;

border-radius:8px;

background:white;

padding:10px;

}


/* CLOSE BUTTON */

.popup-close{

position:absolute;

top:20px;

right:25px;

color:white;

font-size:32px;

cursor:pointer;

}


/* CENTER WHOLE BLOCK */

.top-row{

display:grid;

/* fixed width center layout */
grid-template-columns:420px 360px;

gap:30px;

margin:40px auto;

/* center horizontally */
justify-content:center;

align-items:start;

max-width:900px;

}



/* SLIDER */

/* SLIDER BOX */

.main-slider{

width:500px;

max-width:100%;

overflow:hidden;

position:relative;

background:white;

padding:12px;

border-radius:12px;

box-shadow:0 5px 18px rgba(0,0,0,.06);

}


/* SLIDE TRACK */

.slides{

display:flex;

width:100%;

transition:transform .35s ease;



}


/* EACH IMAGE */

.slides img{

width:100%;

flex-shrink:0;

aspect-ratio:4/4;

object-fit:contain;

border-radius:8px;

}


/* RIGHT ITEMS */

.side-items{

display:grid;

grid-template-columns:repeat(2,170px);

gap:26px;

}



/* SIDE CARD */

.side-card{

background:white;

padding:6px;

border-radius:10px;

box-shadow:0 3px 12px rgba(0,0,0,.05);

text-align:center;

text-decoration:none;

color:#222;
height: 100%;

}



.side-card img{

width:100%;

height:170px;

object-fit:cover;

border-radius:8px;

}



.side-card p{

font-size:12px;

margin-top:4px;

}

/* SLIDER */

.main-slider{

position:relative;

width:420px;

max-width:100%;

overflow:hidden;

background:white;

padding:12px;

border-radius:12px;

box-shadow:0 5px 18px rgba(0,0,0,.06);

}


/* SLIDE TRACK */

.slides{

display:flex;

transition:transform .35s ease;

}


/* IMAGES */

.slides img{

width:100%;

flex-shrink:0;

aspect-ratio:3/4;

object-fit:contain;

border-radius:10px;

}



/* ARROWS */

.main-slider button{

position:absolute;

/* center vertically */
top:50%;

transform:translateY(-50%);

z-index:5;

background:rgba(0,0,0,.6);

color:white;

border:none;

width:36px;

height:36px;

border-radius:50%;

cursor:pointer;

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

}



/* left arrow */

.prev{

left:12px;

}



/* right arrow */

.next{

right:12px;

}



/* hover */

.main-slider button:hover{

background:black;

}

/* TABLET */

@media(max-width:900px){

.top-row{

grid-template-columns:1fr;

max-width:420px;

}


.side-items{

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

}

}