@media only screen and (max-width: 479px) {
    h1 {
        font-size: 29px;
    }
    .blog-detail-content{
        padding:40px;
        margin-top:-75px;
    }
}
        /* === Global Page Styling === */
        body {
            background-color: #143530;
            color: #ccc;
            /* font-family: 'Poppins', sans-serif; */
            line-height: 1.8;
            
        }

        /* === Blog Detail Page Wrapper === */
        .blog-detail-page {
           
            padding: 80px 0;
        }

        .blog-detail-page .title-box {
            text-align: center;
            margin-bottom: 60px;
        }

        .blog-detail-page .title-box .subtitle {
            color: #d4af37;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .blog-detail-page .title-box h2 {
            font-size: 54px;
            /* font:Jost; */
            font-weight: 300;
            color: #fff;
            margin: 10px 0 0;
        }

        /* === Content Area === */
        .blog-detail-content {
            background: #111;
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            color: #ccc;
            line-height: 1.8;
        }

        .blog-detail-content h2 {
            color: #fff;
            font-size: 28px;
            margin: 30px 0 15px;
            font-weight: 600;
        }

        .blog-detail-content h3 {
            color: #d4af37;
            font-size: 22px;
            margin: 25px 0 15px;
            font-weight: 600;
        }

        .blog-detail-content p {
            font-size: 19px;
                font-family: Jost;
            color: #ccc;
            margin-bottom: 20px;
        }

        .blog-detail-content ul {
            list-style: none;
            padding-left: 0;
            margin: 20px 0;
        }

        .blog-detail-content ul li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 12px;
            color: #ccc;
        }

        .blog-detail-content ul li::before {
            content: "•";
            color: #d4af37;
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .blog-detail-content strong {
            color: #fff;
        }

      .blog-detail-content img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 10px;
    margin: 25px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    display: block;
    background-color: #f5f5f5;
    /* border: 1px solid #e0e0e0; */
}
/* Hover effect */
.blog-detail-content img:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-detail-content img {
        max-height: 360px;
        object-fit: cover;
        border-radius: 8px;
    }
}
@media (max-width: 480px) {
    .blog-detail-content img {
        max-height: 300px;
        margin: 20px 0;
    }
}

        @media (max-width: 768px) {
            .blog-detail-content img {
                max-height: 300px;
                object-fit: contain;
            }
            .blog-detail-page .title-box h2 {
                font-size: 28px;
            }
        }

        /* === Back Button === */
        .blog-detail-footer {
            text-align: center;
            margin-top: 60px;
        }

        .blog_read {
            display: inline-flex;
            align-items: center;
            font-size: 14px;
            color: #d4af37;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid #d4af37;
            padding: 8px 16px;
            border-radius: 30px;
            transition: all 0.4s ease;
            background: transparent;
        }

        .blog_read:hover {
            background: #d4af37;
            color: white;
            transform: translateY(-2px);
        }

        .blog_read i {
            margin-left: 6px;
            transition: transform 0.3s ease;
        }

        .blog_read:hover i {
            transform: translateX(4px);
        }
        .subtitle h2{
               font-family: 'Fraunces',serif;
        }