.supercontainer {
padding:5%;
width:100%;
}

/* POST CARD */

.post-card{
display:flex;
width:100%;
gap:80px;
margin-bottom:50px;
}

/* TIMELINE ICON */

.icon-circle-outline{
width:48px;
height:48px;
border:#A28F21 5px solid;
border-radius:50%;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.icon-circle{
width:32px;
height:32px;
background-color:#A28F21;
border-radius:50%;
}

/* CONTENT SECTION */

.clumsy-section{
position:relative;
z-index:1;
align-items:center;
width:90%;
}

.img,
.img img{
width:100%;
border-radius:50px;
}

/* FOLDER IMAGE */

.folder-img{
transition:transform 0.4s ease-in-out;
}

.folder-img,
.folder-img img{
position:absolute;
z-index:2;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:calc(100% - 50px);
border-radius:50px;
height:80%;
}

.clumsy-section:hover .folder-img{
transform:translate(-50%,-70%);
}

/* GLASS MORPH CONTENT */

.content-text{
position:absolute;
z-index:3;
bottom:0;
padding:2rem;
border-radius:50px;

background-color:rgba(255,255,255,0.1);
backdrop-filter:blur(40px);
-webkit-backdrop-filter:blur(40px);

color:white;
width:100%;
max-height:70%;
}

.content-text p{
font-size:clamp(0.85rem,1.5vw,1rem);

display:-webkit-box;
line-clamp: 2;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.content-text h2{
font-size:clamp(1rem,2vw,1.6rem);
line-height:1.2;

display:-webkit-box;
line-clamp: 2;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.content-text .last-child{
margin-bottom:3rem;
}

/* BUTTON */

.btn{
background-color:#A2CCA6;
color:#04140C;
border-radius:10px;
padding:0.5rem 1rem;
border:none;
font-weight:900;
display:block;
text-decoration:none;
width:fit-content;
}

/* PAGINATION */

.pagination{
margin-top:40px;
display:flex;
gap:10px;
flex-wrap:wrap;
}

.page-btn{
padding:8px 14px;
border:none;
border-radius:6px;
background:#fff;
color:#000;
cursor:pointer;
}

.page-btn:hover{
background:#333;
}

/* MOBILE */

@media (max-width:950px){

.img,
.folder-img{
display:none;
}

/* card spacing */

.post-card{
gap:16px;
margin-bottom:30px;
}

/* glass morph card */

.clumsy-section{
background-color:rgba(255,255,255,0.08);
backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);

border-radius:18px;
padding:20px;

width:100%;
}

/* text container */

.content-text{
position:relative;
background:none;
backdrop-filter:none;

padding:0;

max-height:none;
height:auto;
overflow:visible;
}

/* title smaller */

.content-text h2{
font-size:1.2rem;
line-height:1.3;
margin-bottom:10px;
}

/* description */

.content-text p{
font-size:0.9rem;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;

margin-bottom:16px;
}

/* button spacing */

.btn{
font-size:0.9rem;
padding:8px 14px;
}

/* timeline icons smaller */

.icon-circle{
width:16px;
height:16px;
}

.icon-circle-outline{
width:30px;
height:30px;
}

}

/* COUNTDOWN BOXES */
.cet-countdown-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.cet-box {
    background: rgba(255, 255, 255, 0.15); /* Glass look */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 42px;
    text-align: center;
    backdrop-filter: blur(5px);
}

.cet-box .val {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #000; /* Matches the white vibe */
    line-height: 1;
}

.cet-box .lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #000;
    margin-top: 2px;
}

/* SMALLER HERO ADJUSTMENTS */
.cet-hero-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.cet-hero-card {
    width: 100%;
     /* Force it to be smaller than the main timeline cards */
    margin: 0 auto;
}

.cet-hero-card .clumsy-section {
    transform: scale(0.9); /* Subtly shrink the design */
    margin: 0;
}

/* Ensure pagination looks clean */
.pagination {
    margin-top: 30px;
    text-align: center;
    width: 100%;
}
.page-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 12px;
    margin: 0 3px;
    cursor: pointer;
}
.page-btn.active {
    background: #A2CCA6;
    color: white;
}