html, body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:'Poppins', sans-serif;
  background:
  linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('../images/bg.png') center top no-repeat fixed!important;
  background-size:cover;
  background-position:center;
}

/* HEADER */

.main-header{
width:100%;
padding:20px 10px;
}

/* 3 COLUMN GRID */

.header-grid{

display:grid;

grid-template-columns:
120px
1fr
120px;

align-items:center;

max-width:1200px;
margin:auto;

}

/* LOGO */

.logo-area img{
height:60px;
}

/* TITLE */

.title-area{
text-align:center;
}

.site-title{
font-size:28px;
margin:0;
font-weight:700;
}

.tagline{
font-size:14px;
margin-top:6px;
color:#444;
}



@media (max-width:768px){

.header-grid{
grid-template-columns:80px 1fr 80px;
}

.logo-area img{
height:45px;
}

.site-title{
font-size:20px;
}

.tagline{
font-size:12px;
}

}




/* START MENU */


/* MENU AREA */

.menu-area{
display:flex;
justify-content:flex-end;
}


/* HAMBURGER */

.hamburger{
width:28px;
cursor:pointer;
z-index:3000;
position:relative;
}

.hamburger span{
display:block;
height:3px;
background:#0511A5;
margin:6px 0;
border-radius:2px;
transition:0.35s ease;
}


/* HAMBURGER → CROSS */

.hamburger.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}



/* FULLSCREEN MENU */

.mobile-menu{

position:fixed;
top:0;
left:0;

width:100%;
height:100vh;

background:rgba(255,255,255,0.9);
backdrop-filter:blur(10px);

display:flex;
flex-direction:column;

opacity:0;
visibility:hidden;

transition:opacity 0.35s ease;

z-index:2000;

}


/* SHOW MENU */

.mobile-menu.active{
opacity:1;
visibility:visible;
}



/* MENU LINKS */

.menu-links{

flex:1;

display:flex;
flex-direction:column;

align-items:center;
justify-content:center;

gap:32px;

text-align:center;

}



/* MENU LINKS STYLE */

.menu-links a{

font-size:28px;
font-weight:600;

text-decoration:none;
color:#222;

opacity:0;
transform:translateY(30px);

transition:all 0.45s ease;

}



/* SLIDE-IN ANIMATION */

.mobile-menu.active .menu-links a{
opacity:1;
transform:translateY(0);
}



/* STAGGER EFFECT */

.mobile-menu.active .menu-links a:nth-child(1){transition-delay:0.1s;}
.mobile-menu.active .menu-links a:nth-child(2){transition-delay:0.2s;}
.mobile-menu.active .menu-links a:nth-child(3){transition-delay:0.3s;}
.mobile-menu.active .menu-links a:nth-child(4){transition-delay:0.4s;}
.mobile-menu.active .menu-links a:nth-child(5){transition-delay:0.5s;}



/* LOCK PAGE SCROLL WHEN MENU OPEN */

body.menu-open{
overflow:hidden;
}


/* END MENU */

.section-title{
  text-align:center;
  margin:0 0 24px;
  font-size:clamp(22px, 3vw, 30px);
}

.slider-container{
  position:relative;
  width:100%;
}

.scroll-wrapper{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.scroll-wrapper::-webkit-scrollbar{
  display:none;
}

.grid-container{
  display:grid;
  grid-template-rows:repeat(2, 280px);
  grid-auto-flow:column;
  grid-auto-columns:220px;
  gap:16px;
  width:max-content;
  padding:8px 44px;
  box-sizing:border-box;
}

.story-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.story-link:hover{
  text-decoration:none;
  color:inherit;
}

.flip-card{
  width:220px;
  height:280px;
  perspective:1200px;
  cursor:pointer;
  transition:transform .25s ease;
}

.flip-card:hover{
  transform:translateY(-6px) scale(1.02);
}

.flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .6s ease;
  transform-style:preserve-3d;
}

.flip-card:hover .flip-inner{
  transform:rotateY(180deg);
}

.flip-front,
.flip-back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.flip-front{
position:relative;
background:#fff;
display:flex;
flex-direction:column;
}

.category-badge{
position:absolute;
left:0;
bottom:0;   /* attach to bottom of image */
background:#00b4d8;
color:#fff;
font-size:8px;
font-weight:500;
padding:3px 8px;
border-radius:0 10px 10px 0;
z-index:2;
margin-bottom: 16px;
}

.flip-front img{
  width:100%;
  height:150px;
  object-fit:cover;
  flex-shrink:0;
}

.flip-front .card-body{
  padding:10px;
  font-size:12px;
  line-height:1.4;
  display:flex;
  flex-direction:column;
  height:100%;
}

.flip-back{
  transform:rotateY(180deg);
  position:absolute;
  background:#000;
}

.flip-back img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.flip-back::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.18);
}

.image-wrap{
position:relative;
}

.card-stats{
display:flex;
justify-content:space-between;
align-items:center;
font-size:11px;
color:#666;
margin-top:auto;
flex-wrap:nowrap;
}

.stat{
display:flex;
align-items:center;
gap:4px;
white-space:nowrap;
margin-bottom: -6px;
}

.stat:hover{
color:#000;
}

.view{
color:#023e8a;
}

.like{
color:#e63946;
}

.share{
color:#2b9348;
}




.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
  font-size:22px;
  line-height:40px;
  text-align:center;
  cursor:pointer;
  z-index:5;
}

#scrollLeft{ left:4px; }
#scrollRight{ right:4px; }

@media (max-width: 1024px){
  .grid-container{
    grid-template-rows:repeat(2, 260px);
    grid-auto-columns:200px;
    gap:14px;
    padding:8px 38px;
  }

  .flip-card{
    width:200px;
    height:260px;
  }

  .flip-front img{
    height:138px;
  }
}

@media (max-width: 768px){
  body{
    padding:18px 10px;
  }

.menu-area{
padding-right:12px;
}

  .grid-container{
    grid-template-rows:repeat(2, 230px);
    grid-auto-columns:170px;
    gap:12px;
    padding:8px 32px;
  }

  .flip-card{
    width:170px;
    height:230px;
  }

  .flip-front img{
    height:118px;
  }

.flip-front .card-body{
  padding:5px;
  font-size:9px;
}



  .arrow{
    width:34px;
    height:34px;
    font-size:18px;
    line-height:34px;
  }

.flip-front img{
height:100px;
}

.category-badge{
font-size:8px;
padding:2px 7px;
}

.card-stats{
font-size:11px;
}

}

@media (max-width: 480px){
.menu-area{
padding-right:12px;
}

  .grid-container{
    grid-template-rows:repeat(2, 210px);
    grid-auto-columns:150px;
    gap:10px;
    padding:8px 28px;
  }

  .flip-card{
    width:150px;
    height:210px;
  }

  .flip-front img{
    height:104px;
  }

.flip-front .card-body{
  padding:5px;
  font-size:9px;
}


}


.floating-social{
position:fixed;
right:4px;
top:20px;
display:flex;
flex-direction:column;
gap:8px;
z-index:999;
}

.floating-social a{

width:19px;
height:19px;

border:0px solid #0312A4;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:#fff;

transition:0.25s;

}

.floating-social svg{
width:14px;
height:14px;
fill:#0312A4;
transition:0.25s;
}

/* HOVER EFFECT */

.floating-social a:hover{
background:#0312A4;
transform:translateX(-3px);
}

.floating-social a:hover svg{
fill:#fff;
}

@media (max-width: 480px){

.floating-social{
top:205px;
}

}