/*=========================================
        BLOG DETAIL PAGE
=========================================*/

.page-content-container{
    background:#f8fafc;
    padding:4rem 0;
}

/*=========================================
        ARTICLE CARD
=========================================*/

.blog-detail{
    background:#fff;
    border-radius:1rem;
    padding:3rem;
    box-shadow:0 .5rem 1.5rem rgba(4,55,105,.08);
}

/*=========================================
        HERO SECTION
=========================================*/

.blog-top-row{
    display:flex;
    align-items:center;
    gap:2.5rem;
    margin-bottom:3rem;
}

.blog-hero-img-wrap{
    flex:0 0 40%;
}

.blog-main-image{
    width:100%;
    border-radius:.9rem;
    border:1px solid #d7e3f2;
    box-shadow:0 .5rem 1.5rem rgba(4,55,105,.12);
    transition:all .35s ease;
}

.blog-main-image:hover{
    transform:translateY(-6px);
    box-shadow:0 1rem 2rem rgba(4,55,105,.20);
}

/*=========================================
        MAIN HEADING
=========================================*/

.content-heading-main{
    color:#043769;
    font-size:2.3rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:1rem;
}

/*=========================================
        INTRO HIGHLIGHT
=========================================*/

.highlight-text{
    color:#0a5aa3;
    font-weight:700;
}

/*=========================================
        SECTION HEADINGS
=========================================*/

.content-heading-sub{
    color:#043769;
    font-size:1.7rem;
    font-weight:700;
    margin-top:3rem;
    margin-bottom:.6rem;
}

/*=========================================
        DIVIDER
=========================================*/

.section-divider{
    width:80px;
    height:3px;
    background:#043769;
    border:none;
    opacity:1;
    margin:0 0 1.5rem;
}

/*=========================================
        PARAGRAPHS
=========================================*/

.blog-detail p{
    color:#495057;
    font-size:1rem;
    line-height:1.9;
    text-align:justify;
}

/*=========================================
        ARTICLE IMAGES
=========================================*/

.article-image{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:3rem 0;
}

.article-image img{
    display:block;
    width:auto;
    max-width:80%;
    max-height:500px;
    border-radius:.9rem;
    border:1px solid #d7e3f2;
    box-shadow:0 .5rem 1.5rem rgba(4,55,105,.12);
    transition:all .35s ease;
}

.article-image img:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 1rem 2rem rgba(4,55,105,.22);
}

/*=========================================
        BLOCKQUOTE
=========================================*/

.story-blockquote{
    background:#eef5fc;
    border-left:5px solid #043769;
    border-radius:.75rem;
    padding:1.75rem 2rem;
    margin:3rem 0;
}

.story-blockquote p{
    font-size:1.05rem;
    color:#2d3748;
    font-style:italic;
    margin-bottom:.75rem;
}

.story-blockquote .blockquote-footer{
    color:#043769;
    font-weight:700;
}

/*=========================================
        BUTTON
=========================================*/

.back-to-blog{
    text-align:center;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid #dee8f3;
}

.btn-back-blog,
.btn-back-blog:visited,
.btn-back-blog:focus{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    background:#043769;
    color:#fff !important;
    padding:.85rem 2.4rem;
    border-radius:50rem;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
    box-shadow:0 .5rem 1rem rgba(4,55,105,.18);
}

.btn-back-blog:hover,
.btn-back-blog:active{
    background:#0a5aa3;
    color:#fff !important;
    text-decoration:none;
    transform:translateY(-3px);
    box-shadow:0 .8rem 1.5rem rgba(4,55,105,.28);
}

.btn-back-blog i{
    color:#fff !important;
}

/*=========================================
        LINKS
=========================================*/

.blog-detail a{
    color:#043769;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

.blog-detail a:hover{
    color:#0a5aa3;
    text-decoration:underline;
}

/* Don't affect button */

.btn-back-blog:hover,
.btn-back-blog:focus,
.btn-back-blog:active{
    text-decoration:none !important;
}

/*=========================================
        RESPONSIVE
=========================================*/

@media (max-width:991px){

    .blog-detail{
        padding:2rem;
    }

    .blog-top-row{
        flex-direction:column;
        text-align:center;
    }

    .blog-hero-img-wrap{
        width:100%;
        max-width:500px;
    }

    .content-heading-main{
        font-size:2rem;
    }

    .content-heading-sub{
        font-size:1.45rem;
    }

    .article-image img{
        max-width:90%;
    }

}

@media (max-width:768px){

    .page-content-container{
        padding:2.5rem 0;
    }

    .blog-detail{
        padding:1.5rem;
    }

    .content-heading-main{
        font-size:1.65rem;
    }

    .content-heading-sub{
        font-size:1.3rem;
    }

    .blog-detail p{
        font-size:.95rem;
        line-height:1.8;
    }

    .article-image{
        margin:2rem 0;
    }

    .article-image img{
        max-width:100%;
    }

}

/* Dream Smile page image */
.dream-hero-img{
    flex: 0 0 42%;
    max-width: 42%;
    align-self: flex-start;
    margin-top: -5px;   /* Adjust: -20, -40, -60 as needed */
}

.dream-hero-img .blog-main-image{
    width: 100%;
    display: block;
}

/* First Visit Page */
.first-visit-row{
    display: flex;
    align-items: flex-start !important;
    gap: 2.5rem;
}

.first-visit-img{
    flex: 0 0 42%;
    max-width: 42%;
    margin-top: -50rem;      /* Adjust as needed */
}

.first-visit-img .blog-main-image{
    width: 100%;
    display: block;
}