/* ====================== section-blog ============================= */
.section-blog .row{row-gap:20px;--bs-gutter-x: 20px;}
.blog-inner-card{padding:20px;background-color:var(--blue-opacity-50);border-radius:20px;border:1px solid var(--white-opacity-10);box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.1) inset;-webkit-box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.1) inset;-moz-box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.1) inset;height: 100%; display: flex; flex-direction: column; align-items: start;}
.blog-inner-card .blog-image-wrap{position:relative;padding-top:51.3%;border-radius:20px;overflow:hidden;width:100%;}
.blog-inner-card .blog-image-wrap img{position:absolute;top:0;left:0;height:100%;width:100%;transition:0.3s ease-in-out;object-fit: cover;object-position:center center;}
.blog-inner-card .blog-image-wrap:hover img{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}

.blog-inner-content{margin-top:25px;display: flex; flex-direction: column; align-items: start; height: 100%; gap: 14px;}
.blog-inner-content p{color:rgba(255, 255, 255, 0.6);font-weight: 400;}
.blog-inner-content p:last-of-type{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.blog-inner-content .heading-style-5{font-weight: 500;color:var(--white);transition:0.3s ease-in-out;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.blog-inner-content .heading-style-5:hover{color:var(--blue);}
.blog-inner-content .theme-btn{margin-top:auto;}

/* ====================== blog detail page ============================= */
.section-banner-blog-inner{padding-top:155px !important;}
.section-banner-blog-inner img{height: 433px;border-radius:20px;width:100%;max-width:1032px;margin-inline:auto !important;object-fit:cover;object-position:center center;}
.section-blog-detail .container{max-width:866px;}
.section-blog-detail h1{font-size:55px;line-height:62px;color:var(--white);font-family:var(--space-grotesk);font-weight: 700;margin-bottom:54px;}
.section-blog-detail h5,
.section-blog-detail h6,
.section-blog-detail h4,
.section-blog-detail h3,
.section-blog-detail h2{ margin-bottom: 54px;color: var(--white);font-size:40px;line-height:48px;font-family:var(--space-grotesk);font-weight: 700;}

.section-blog-detail p,
.section-blog-detail p a,
.section-blog-detail ul li,
.section-blog-detail ol li{text-align: start; margin-bottom:30px;color: var(--white); font-family: var(--space-grotesk); font-size: 16px;line-height:24px; font-weight: 400;letter-spacing: 0;}

.section-blog-detail ul li,.section-blog-detail ol li{list-style: disc;margin-bottom: 5px !important;}
.section-blog-detail ul,.section-blog-detail ol{padding-left: 30px;display:flex;flex-direction: column;margin-bottom: 42px;}
.section-blog-detail ol li{list-style: decimal;}

/* .section-blog-detail .blog-inner-image{display:flex;} */
.section-blog-detail img{height: 486px;object-fit: cover;margin-bottom: 30px; border-radius: 20px;width: 100% !important;}

/* hover */
.section-blog-detail a{color: var(--blue);font-weight:600;margin: 0 !important;text-decoration: underline;}
.section-blog-detail a:hover{text-decoration: none;}

.blog-content-related{margin-bottom:45px;}

/* ======================================= Media query ======================================== */

@media screen and (max-width:1366px){}
@media screen and (max-width:1199px){
    /* ====================== section-blog ============================= */
    .section-blog .row{row-gap:18px;--bs-gutter-x: 18px;}
    .blog-inner-card{padding:18px;border-radius:18px;}
    .blog-inner-card .blog-image-wrap{border-radius:18px;}
    .blog-inner-content{margin-top:22px;gap: 12px;}
    
    /* ====================== blog detail page ============================= */
    .section-banner-blog-inner{padding-top:125px !important;}
    .section-banner-blog-inner img{height: 390px;border-radius:18px;}
    .section-blog-detail h1{font-size:50px;line-height:58px;margin-bottom:30px;}
    .section-blog-detail h5,
    .section-blog-detail h6,
    .section-blog-detail h4,
    .section-blog-detail h3,
    .section-blog-detail h2{ margin-bottom: 30px;font-size:36px;line-height:44px;}

    .section-blog-detail p,
    .section-blog-detail p a,
    .section-blog-detail ul li,
    .section-blog-detail ol li{ margin-bottom:24px;font-size: 15px;line-height:22px;}

    .section-blog-detail ul,.section-blog-detail ol{padding-left: 24px;margin-bottom: 30px;}

    .section-blog-detail img{height: 320px;margin-bottom: 24px; border-radius: 18px;}
    .blog-content-related { margin-bottom: 40px;}
}
@media screen and (max-width:991px){
    /* ====================== section-blog ============================= */
    .section-blog .row{row-gap:16px;--bs-gutter-x: 16px;}
    .blog-inner-card{padding:16px;border-radius:16px;}
    .blog-inner-card .blog-image-wrap{border-radius:16px;}
    .blog-inner-content{margin-top:20px;gap: 11px;}
    
    /* ====================== blog detail page ============================= */
    .section-banner-blog-inner{padding-top:120px !important;}
    .section-banner-blog-inner img{height: 330px;border-radius:16px;}
    .section-blog-detail .container{max-width:720px;}
    
    .section-blog-detail h1{font-size:45px;line-height:55px;margin-bottom:20px;}
    .section-blog-detail h5,
    .section-blog-detail h6,
    .section-blog-detail h4,
    .section-blog-detail h3,
    .section-blog-detail h2{ margin-bottom: 20px;font-size:32px;line-height:42px;}

    .section-blog-detail p,
    .section-blog-detail p a,
    .section-blog-detail ul li,
    .section-blog-detail ol li{ margin-bottom:18px;font-size: 14px;line-height:20px;}

    .section-blog-detail ul,.section-blog-detail ol{margin-bottom: 22px;}

    .section-blog-detail img{height: 280px;margin-bottom: 20px; border-radius: 16px;}
    .blog-content-related { margin-bottom: 36px;}
}
@media screen and (max-width:767px){
     /* ====================== section-blog ============================= */
     .section-blog .row{row-gap:12px;--bs-gutter-x: 12px;}
     .blog-inner-card{padding:12px;border-radius:12px;}
     .blog-inner-card .blog-image-wrap{border-radius:12px;}
     .blog-inner-content{margin-top:16px;}
     .blog-inner-card .blog-image-wrap { padding-top: 58%; }
     
     /* ====================== blog detail page ============================= */
    .section-banner-blog-inner{padding-top:110px !important;}
    .section-banner-blog-inner img{height: 290px;}
    .section-blog-detail .container{max-width:100%;}
    
    .section-blog-detail h1{font-size:42px;line-height:52px;margin-bottom:18px;}
    .section-blog-detail h5,
    .section-blog-detail h6,
    .section-blog-detail h4,
    .section-blog-detail h3,
    .section-blog-detail h2{ margin-bottom: 18px;font-size:28px;line-height:38px;}

    .section-blog-detail p,
    .section-blog-detail p a,
    .section-blog-detail ul li,
    .section-blog-detail ol li{ margin-bottom:16px;}

    .section-blog-detail ul,.section-blog-detail ol{margin-bottom: 20px;}

    .section-blog-detail img{height: 260px;margin-bottom: 18px;}
    .blog-content-related { margin-bottom: 30px;}
}
@media screen and (max-width:575px){
    /* ====================== blog detail page ============================= */
    .section-banner-blog-inner img{min-height: 200px;height:auto;}
    
    .section-blog-detail h1{font-size:34px;line-height:44px;}
    .section-blog-detail h5,
    .section-blog-detail h6,
    .section-blog-detail h4,
    .section-blog-detail h3,
    .section-blog-detail h2{ margin-bottom: 16px;font-size:24px;line-height:34px;}
    
    .blog-content-related { margin-bottom: 26px;}
    
}