/* Breadcrumb */
.blog-hero-breadcrumb-wrapper { position: absolute; top: 0; left: 0; right: 0; height: min-content; z-index: 9; }
.blog-hero-container .breadcrumb-wrapper { position: relative; width: calc(100% + 30px); height: 60px; background: var(--kal-black); }
.blog-hero-container .breadcrumb-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background-color: var(--kal-black); z-index: 0; }
.blog-hero-container .breadcrumb-icon { width: 60px; height: 60px; background-color: var(--kal-blue); padding: 12px; }
.blog-hero-container { border-bottom: 2px solid var(--kal-grey); }
.blog-hero-left { padding-top: 120px; }
.blog-hero-content { padding: 40px 0 60px; font-size: 20px; font-weight: 600;  display: flex; flex-flow: column;}
.blog-hero-category { font-size: 18px; font-weight: 400; line-height: 1.25; letter-spacing: 0.004em; margin-bottom: 10px; }
.blog-hero-content h1 { font-size: 70px; font-weight: 700; line-height: 0.85; letter-spacing: -0.01em; margin-bottom: 40px; }
.blog-hero-cta{margin-top: 40px;}
.blog-hero-img { padding-bottom: 59%; width: calc(100% + 15px); }
.blog-hero-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.bh-right-text { max-width: 450px; padding: 28px 30px; }
.bhrt-name { font-weight: 400; margin-bottom: 8px; }
.bhrt-name a:hover { text-decoration: underline; color: inherit; }
.bhrt-date, .bhrt-time { font-size: 25px; letter-spacing: -0.01em; }
.bhrt-cta { margin-top: 28px; }
.blog-single-content { max-width: 75%; font-size: 21px;  display: flex; flex-flow: column;}
.blog-single-content h2 { font-size: 30px; line-height: 1; margin-bottom: 0; letter-spacing: -0.025em; }
.blog-single-content p:has(+ p>img) { margin-bottom: 90px; }
.blog-single-content p:has(img):not(:last-child) { margin-bottom: 80px; }
.blog-single-content > p a:not(.btn) { text-decoration: underline; color: var(--kal-blue); font-weight: 600; }
.blog-single-content > p a:not(.btn):hover { color: var(--kal-blue); text-decoration: none; }
.blockquote-wrapper { position: relative; padding-left: 13%; margin: 26px 0 50px; }
.blockquote-inner { padding: 50px 52px; background: var(--kal-blue-light); }
.blockquote-wrapper::before { content: ''; width: 8%; aspect-ratio: 1.1/1; position: absolute; top: 0; left: 0; background: url("../../assets/images/quote-icon.svg") no-repeat center/contain; }
.blockquote-wrapper blockquote { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; margin-bottom: 0; }
.blockquote-wrapper blockquote:not(:last-child) { margin-bottom: 36px; }
.blockquote-wrapper p:not(:last-child) { margin-bottom: 20px; }
/* ========================================== 
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px) {
 .blog-hero-content { padding: 46px 0 36px; }
.blog-hero-content h1 { font-size: 50px; margin-bottom: 36px; }
.bh-right-text { max-width: 290px; }
.bhrt-cta { margin-top: 35px; }
.blog-single-content { max-width: 80%; }
 }
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
 .blog-hero-container .breadcrumb-icon { position: relative; inset: 0; }
.blog-hero-content { padding: 28px 0; }
.blog-hero-content h1 { margin-bottom: 30px; }
.blog-hero-img { padding-bottom: 80%; }
.bh-right-text { max-width: 315px; }
.blog-single-content { max-width: 90%; }
.blockquote-inner { padding: 32px 40px; }
.blockquote-wrapper::before { width: 6.75%; }
 }
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
 .blog-hero-container .breadcrumb-wrapper { width: calc(100% + 135px); }
.blog-hero-content { padding: 22px 0 24px 24px; }
.blog-hero-content h1 { margin-bottom: 15px; }
.blog-hero-cta{margin-top: 25px;}
.blog-hero-right { margin-left: -15px; }
.blog-single-content { max-width: 100%; font-size: 18px; }
.blockquote-wrapper { padding-left: 13%; }
.blockquote-inner { padding: 32px 30px; }
.blockquote-wrapper::before { width: 9%; }
.blockquote-wrapper blockquote:not(:last-child) { margin-bottom: 24px; }
 }
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
 .blog-hero-container .breadcrumb-wrapper { width: calc(100% + 15px); height: 50px; }
.blog-hero-container .breadcrumb-icon { width: 60px; height: 60px; }
.blog-hero-left { padding-top: 0; }
.blog-hero-content { padding: 50px 0; }
.blog-hero-content h1 { margin-bottom: 22px; }
.blog-hero-right { width: calc(100% + 30px); margin-left: -15px; padding-top: 50px; }
.blog-hero-img { width: 100%; padding-bottom: 77%; }
.bh-right-text { padding: 20px 45px 30px; max-width: 100%; }
.bhrt-name { margin-bottom: 10px; }
.bhrt-cta { margin-top: 28px; }
.blog-single-content p:has(+ p>img) { margin-bottom: 50px; }
.blog-single-content p:has(img):not(:last-child) { margin-bottom: 45px; }
.blockquote-wrapper { padding: 90px 0 0; margin:0 0 24px; }
.blockquote-wrapper::before { width: 66px; }
 }
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) {
 }
/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px) {
 }