/* General Reset and Layout */
.edu-blog-wrapper * {
    box-sizing: border-box;
    font-family: "Lora", Georgia, "Times New Roman", serif;

}

.edu-blog-section {
    padding: 27px 0;
    /* background: linear-gradient(to bottom, #ffffff 60%, #452c2f 60%); */
    text-align: center;
    position: relative;
    height: auto;   /* REMOVE fixed height */
    min-height: 780px; /* optional */
     background: 
        linear-gradient(to bottom, #ffffff 60%, #452c2f 60%),
        url("../images/background/ChatGPT Image Mar 28, 2026, 04_18_26 PM.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.edu-blog-header h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.edu-blog-header h2 span {
    color: #c5a059;
}

.edu-blog-header p {
    color: #555;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Carousel Sizing */
.edu-blog-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 14px 20px 2px 20px;
    scroll-snap-type: x mandatory;
    max-width: 1400px;
    margin: 0 auto;
    scrollbar-width: none;
}

.edu-blog-carousel::-webkit-scrollbar {
    display: none;
}

/* Premium Card Design */
.edu-blog-card {
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    border-radius: 15px;
    /* min-width: 300px;
    max-width: 300px; */
    width: 300px;   /* instead of min/max */
    height: 460px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 12px;
    border: 2px solid #452c2f;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
    position: relative;
}

.edu-blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Image Area */
.edu-blog-img-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #452c2f;
}

.edu-blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badges */
.edu-blog-cat-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    color: #333;
}

.edu-blog-date-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 5;
    background: #452c2f;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}

.edu-blog-date-badge .edu-blog-day {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
    line-height: 1;
}

.edu-blog-date-badge .edu-blog-month {
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Text Content Area */
.edu-blog-content {
    padding: 15px 5px 0 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.edu-blog-content h3 {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
    line-height: 1.2em;
    height: 3.6em;
    min-height: 3.6em;
    display: block;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-align: left;
}

.edu-blog-content h3.scrollable {
    overflow-y: auto;
    padding-right: 5px;
}

.edu-blog-author {
    font-size: 0.8rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    justify-content: center;
    background-color: #452c2f;
    font-weight: bold;
    border-radius: 20px;
}

.edu-blog-author i {
    color: #c5a059;
    font-size: 1rem;
}

.edu-blog-content p {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5em;
    margin: 0;
    height: 6.0em;
    min-height: 6.0em;
    display: block;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-align: justify;
}

.edu-blog-content p.scrollable-p {
    overflow-y: auto;
    padding-right: 5px;
}

/* Footer and Scrollbars */
.edu-blog-view-all {
    background: #452c2f;
    border: 2px solid #fff;
    padding: 12px 40px;
    font-weight: bold;
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    margin-top: -10px;
}

.scrollable::-webkit-scrollbar,
.scrollable-p::-webkit-scrollbar {
    width: 4px;
}

.scrollable::-webkit-scrollbar-thumb,
.scrollable-p::-webkit-scrollbar-thumb {
    background: #c5a059;
    border-radius: 10px;
}

/* Navigation Buttons */
.edu-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.edu-scroll-btn:hover {
    background: #8b5e3c;
    transform: translateY(-50%) scale(1.1);
}

.edu-scroll-btn:hover i,
.edu-scroll-btn:hover span {
    color: #fff;
}

.edu-scroll-left {
    left: 10px;
}

.edu-scroll-right {
    right: 10px;
}

.edu-blog-carousel {
    justify-content: flex-start;
}

.edu-blog-carousel:has(.edu-blog-card:only-child) {
    justify-content: center;
}



/* BLOG BUTTON WRAPPER */
.blog-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 30px 0;
}

/* BLOG BUTTON */
.blog-orange-btn {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #452c2f;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 16px;

    border: 3px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

/* ICON */
.blog-btn-icon {
    width: 22px;
    height: 22px;
    transition: all 0.3s ease-in-out;
}

.blog-btn-icon path {
    fill: #452c2f;
}

/* HOVER EFFECT */
.blog-orange-btn:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.6);
}

.blog-orange-btn:hover .blog-btn-icon {
    transform: translateX(4px);
}

/* SHINE EFFECT */
.blog-orange-btn::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}

.blog-orange-btn:hover::before {
    animation: blog-shine 1.5s ease-out infinite;
}

@keyframes blog-shine {
    0% { left: -100px; }
    60% { left: 100%; }
    100% { left: 100%; }
}

@media (min-width: 768px) {
    .edu-blog-carousel {
        justify-content: center !important;
    }
}


/* ========================================= */
/* 🔥 MOBILE (0px - 575px) */
/* ========================================= */
@media (max-width: 575px) {

    .blog-btn-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 10px;
        padding: 0 10px;
    }

    .blog-orange-btn {
        width: 100%;
        max-width: 260px;

        padding: 10px 16px;
        font-size: 14px;
        gap: 8px;

        border-radius: 30px;
    }

    .blog-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* ========================================= */
/* 📱 SMALL DEVICES (576px - 767px) */
/* ========================================= */
@media (min-width: 576px) and (max-width: 767px) {

    .blog-btn-wrapper {
        margin: 25px 0;
    }

    .blog-orange-btn {
        padding: 11px 18px;
        font-size: 15px;
        max-width: 280px;
    }

    .blog-btn-icon {
        width: 20px;
        height: 20px;
    }
}


/* ========================================= */
/* 📲 TABLETS (768px - 991px) */
/* ========================================= */
@media (min-width: 768px) and (max-width: 991px) {

    .blog-btn-wrapper {
        margin: 30px 0;
    }

    .blog-orange-btn {
        padding: 12px 22px;
        font-size: 15.5px;
    }

    .blog-btn-icon {
        width: 22px;
        height: 22px;
    }
}


/* ========================================= */
/* 💻 LARGE DEVICES (992px - 1199px) */
/* ========================================= */
@media (min-width: 992px) and (max-width: 1199px) {

    .blog-orange-btn {
        padding: 12px 24px;
        font-size: 16px;
    }
}


/* ========================================= */
/* 🖥️ XL DEVICES (1200px - 1399px) */
/* ========================================= */
@media (min-width: 1200px) and (max-width: 1399px) {

    .blog-orange-btn {
        padding: 13px 26px;
        font-size: 16px;
    }
}


/* ========================================= */
/* 🖥️ XXL DEVICES (1400px+) */
/* ========================================= */
@media (min-width: 1400px) {

    .blog-orange-btn {
        padding: 14px 28px;
        font-size: 17px;
    }
}


/* ========================================= */
/* 🔥 MOBILE DEVICES (0px - 575px) */
/* ========================================= */
@media (max-width: 575px) {

    /* SECTION WRAPPER FIX */
    .edu-blog-section {
        padding: 32px 0 -20px;
        position: relative;
        overflow: hidden;
    }

    /* CENTER HEADER */
    .edu-blog-header {
        text-align: center;
        padding: 0 15px;
    }

    .unique-golden-badge {
        margin: 0 auto 10px;
        display: inline-block;
    }

    .unique-dream-heading {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .edu-blog-header p {
        font-size: 0.9rem;
    }

    /* 🔥 SLIDER FIX (IMPORTANT) */
    .edu-blog-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding: 20px 16px;
    }

    /* HIDE SCROLLBAR */
    .edu-blog-carousel::-webkit-scrollbar {
        display: none;
    }

    .edu-blog-card {
        min-width: 100%;
        flex: 0 0 100%;
        scroll-snap-align: center;
        border-radius: 14px;
    }

    /* IMAGE HEIGHT */
    .edu-blog-img-wrapper img {
        height: 180px;
        width: 100%;
        object-fit: cover;
    }

    /* CONTENT HEIGHT BALANCE */
    .edu-blog-content {
        padding: 15px;
        min-height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* 🔥 BUTTON FIX */
    .edu-scroll-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        z-index: 20;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
        color: black;
        border: none;
        cursor: pointer;
    }

    .edu-scroll-left {
        left: 8px;
    }

    .edu-scroll-right {
        right: 8px;
    }
}





/* ========================================= */
/* 📱 SMALL DEVICES (576px - 767px) */
/* ========================================= */
@media (min-width: 576px) and (max-width: 767px) {

    .edu-blog-header {
        text-align: center;
    }

    .edu-blog-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
    }

    .edu-blog-card {
        min-width: 90%;
        flex: 0 0 90%;
        scroll-snap-align: center;
    }

    .edu-blog-img-wrapper img {
        height: 200px;
    }
}


/* ========================================= */
/* 📲 TABLETS (768px - 991px) */
/* ========================================= */
@media (min-width: 768px) and (max-width: 991px) {

    .edu-blog-carousel {
        display: flex;
        gap: 20px;
    }

    .edu-blog-card {
        min-width: 45%;
        flex: 0 0 45%;
    }

    .unique-dream-heading {
        font-size: 2rem;
    }
}


/* ========================================= */
/* 💻 LARGE DEVICES (992px - 1199px) */
/* ========================================= */
@media (min-width: 992px) and (max-width: 1199px) {

    .edu-blog-card {
        min-width: 30%;
        flex: 0 0 30%;
    }

    .edu-blog-carousel {
        gap: 25px;
    }
}


/* ========================================= */
/* 🖥️ XL DEVICES (1200px - 1399px) */
/* ========================================= */
@media (min-width: 1200px) and (max-width: 1399px) {

    .edu-blog-card {
        min-width: 22%;
        flex: 0 0 22%;
    }
}


/* ========================================= */
/* 🖥️ XXL DEVICES (1400px+) */
/* ========================================= */
@media (min-width: 1400px) {

    .edu-blog-card {
        min-width: 20%;
        flex: 0 0 20%;
    }
}