/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM BLOG PAGE
   blog.css
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --kbt-blog-navy: #06243f;
    --kbt-blog-navy-dark: #031a2f;
    --kbt-blog-navy-soft: #123b5b;

    --kbt-blog-gold: #d6a33a;
    --kbt-blog-gold-light: #efc86d;
    --kbt-blog-gold-soft: #f8edcf;

    --kbt-blog-cream: #fbfaf6;
    --kbt-blog-white: #ffffff;

    --kbt-blog-text: #26384a;
    --kbt-blog-text-soft: #687789;
    --kbt-blog-border: #e8e7e2;

    --kbt-blog-shadow:
        0 12px 40px rgba(4, 28, 48, 0.08);

    --kbt-blog-shadow-hover:
        0 24px 60px rgba(4, 28, 48, 0.15);

    --kbt-blog-heading:
        Georgia,
        "Times New Roman",
        serif;

    --kbt-blog-body:
        "Montserrat",
        Arial,
        sans-serif;

    --kbt-blog-radius: 16px;

}


/* =========================================================
   02. PAGE RESET
========================================================= */

.kbt-blog-page,
.kbt-blog-page * {
    box-sizing: border-box;
}


.kbt-blog-page {
    width: 100%;
    overflow: hidden;
    background: var(--kbt-blog-cream);
    color: var(--kbt-blog-text);
    font-family: var(--kbt-blog-body);
}


.kbt-blog-page a {
    text-decoration: none;
}


.kbt-blog-page img {
    max-width: 100%;
}


.kbt-blog-page button,
.kbt-blog-page input {
    font-family: inherit;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.kbt-blog-page .container {
    width: min(100% - 40px, 1370px);
    margin-inline: auto;
}


/* =========================================================
   04. PREMIUM BLOG HERO
========================================================= */

.kbt-journal-hero {

    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    background-image:
        url("../images/blog.webp");

    background-size: cover;
    background-position: center center;

    isolation: isolate;

    overflow: hidden;

}


.kbt-journal-hero__overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 22, 40, 0.88) 0%,
            rgba(3, 28, 48, 0.68) 38%,
            rgba(3, 27, 47, 0.34) 70%,
            rgba(2, 22, 40, 0.18) 100%
        );

    z-index: -1;

}


.kbt-journal-hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 90px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.16),
            transparent
        );

    pointer-events: none;

}


.kbt-journal-hero__content {

    position: relative;

    width: min(760px, 100%);

    padding:
        68px
        0
        72px;

    z-index: 2;

}


/* =========================================================
   05. BREADCRUMB
========================================================= */

.kbt-journal-hero__breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.01em;

}


.kbt-journal-hero__breadcrumb a {

    color: rgba(255, 255, 255, 0.88);

    transition:
        color 0.25s ease;

}


.kbt-journal-hero__breadcrumb a:hover {

    color: var(--kbt-blog-gold-light);

}


.kbt-journal-hero__breadcrumb-arrow {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.55);

}


.kbt-journal-hero__breadcrumb-arrow i {

    font-size: 18px;

}


.kbt-journal-hero__breadcrumb-current {

    color: var(--kbt-blog-gold-light);

}


/* =========================================================
   06. HERO EYEBROW
========================================================= */

.kbt-journal-hero__eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-family: var(--kbt-blog-body);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    margin-bottom: 15px;

}


.kbt-journal-hero__eyebrow::before {

    content: "";

    width: 48px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--kbt-blog-gold),
            var(--kbt-blog-gold-light)
        );

    border-radius: 999px;

}


/* =========================================================
   07. HERO TITLE
========================================================= */

.kbt-journal-hero__title {

    margin: 0;

    max-width: 760px;

    color: #ffffff;

    font-family: var(--kbt-blog-heading);

    font-size: clamp(48px, 5vw, 74px);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.035em;

    text-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22);

}


.kbt-journal-hero__title span {

    display: inline;

    color: #ffffff;

}


/* =========================================================
   08. HERO DESCRIPTION
========================================================= */

.kbt-journal-hero__description {

    max-width: 690px;

    margin: 22px 0 0;

    color:
        rgba(255, 255, 255, 0.91);

    font-family: var(--kbt-blog-body);

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

}


/* =========================================================
   09. HERO DECORATIVE LINE
========================================================= */

.kbt-journal-hero__line {

    display: block;

    width: 78px;

    height: 3px;

    margin-top: 28px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--kbt-blog-gold),
            var(--kbt-blog-gold-light)
        );

}


/* =========================================================
   10. BLOG CONTENT
========================================================= */

.kbt-blog-content {

    position: relative;

    padding:
        32px
        0
        80px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--kbt-blog-cream) 32%,
            #ffffff 100%
        );

}


/* =========================================================
   11. BLOG TOOLBAR
========================================================= */

.kbt-blog-toolbar {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    margin-bottom: 28px;

    padding: 0 2px;

}


/* =========================================================
   12. CATEGORY FILTERS
========================================================= */

.kbt-blog-filters {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-wrap: wrap;

}


.kbt-filter-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 17px;

    border: 1px solid #ecebe7;

    border-radius: 999px;

    background: #ffffff;

    color: var(--kbt-blog-navy);

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(4, 28, 48, 0.035);

    transition:
        background 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;

}


.kbt-filter-btn i {

    font-size: 16px;

}


.kbt-filter-btn:hover {

    color: var(--kbt-blog-navy);

    border-color:
        rgba(214, 163, 58, 0.45);

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(4, 28, 48, 0.08);

}


.kbt-filter-btn.active {

    color: #ffffff;

    border-color: var(--kbt-blog-gold);

    background:
        linear-gradient(
            135deg,
            #d59d2d,
            #e8b953
        );

    box-shadow:
        0 8px 22px rgba(214, 163, 58, 0.25);

}


/* =========================================================
   13. SEARCH
========================================================= */

.kbt-blog-search {

    flex: 0 0 300px;

    position: relative;

}


.kbt-blog-search__input {

    width: 100%;

    height: 46px;

    padding:
        0 58px
        0 18px;

    border: 1px solid #dfe2e5;

    border-radius: 999px;

    outline: none;

    background: #ffffff;

    color: var(--kbt-blog-navy);

    font-size: 12px;

    box-shadow:
        0 4px 15px rgba(4, 28, 48, 0.035);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.kbt-blog-search__input::placeholder {

    color: #9aa5b1;

}


.kbt-blog-search__input:focus {

    border-color:
        rgba(214, 163, 58, 0.75);

    box-shadow:
        0 0 0 4px rgba(214, 163, 58, 0.10);

}


.kbt-blog-search__button {

    position: absolute;

    top: 4px;
    right: 4px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #d39a2c,
            #e6b54f
        );

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(214, 163, 58, 0.24);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.kbt-blog-search__button i {

    font-size: 18px;

}


.kbt-blog-search__button:hover {

    transform: scale(1.06);

    box-shadow:
        0 7px 18px rgba(214, 163, 58, 0.30);

}


/* =========================================================
   14. RESULTS MESSAGE
========================================================= */

.kbt-blog-results {

    min-height: 0;

    margin-bottom: 12px;

    color: var(--kbt-blog-text-soft);

    font-size: 13px;

}


.kbt-blog-results:empty {

    display: none;

}


/* =========================================================
   15. BLOG GRID
========================================================= */

.kbt-blog-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        24px;

}


/* =========================================================
   16. BLOG CARD
========================================================= */

.kbt-blog-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid rgba(226, 228, 228, 0.9);

    border-radius:
        var(--kbt-blog-radius);

    box-shadow:
        var(--kbt-blog-shadow);

    transition:
        transform 0.38s cubic-bezier(0.2, 0.75, 0.25, 1),
        box-shadow 0.38s ease,
        border-color 0.38s ease;

}


.kbt-blog-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(214, 163, 58, 0.22);

    box-shadow:
        var(--kbt-blog-shadow-hover);

}


/* =========================================================
   17. CARD IMAGE
========================================================= */

.kbt-blog-card__image-wrap {

    position: relative;

    width: 100%;

    height: 215px;

    overflow: hidden;

    background:
        #dfe5e8;

}


.kbt-blog-card__image-link {

    display: block;

    width: 100%;
    height: 100%;

}


.kbt-blog-card__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;

}


.kbt-blog-card:hover
.kbt-blog-card__image {

    transform:
        scale(1.075);

    filter:
        saturate(1.05)
        contrast(1.02);

}


/* =========================================================
   18. IMAGE OVERLAY
========================================================= */

.kbt-blog-card__image-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 35%,
            rgba(0, 0, 0, 0.08) 100%
        );

}


/* =========================================================
   19. CATEGORY BADGE
========================================================= */

.kbt-blog-card__category {

    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding:
        0 12px;

    border:
        1px solid rgba(255, 255, 255, 0.34);

    border-radius:
        999px;

    color: #ffffff;

    background:
        rgba(5, 38, 63, 0.88);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.01em;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.15);

}


.kbt-blog-card__category i {

    font-size: 14px;

}


/* =========================================================
   20. CATEGORY COLORS
========================================================= */

.kbt-blog-card__category[data-category-color="Route Guide"] {

    background:
        rgba(7, 94, 72, 0.94);

}


.kbt-blog-card__category[data-category-color="Family Travel"] {

    background:
        rgba(181, 117, 12, 0.95);

}


.kbt-blog-card__category[data-category-color="Travel Tips"] {

    background:
        rgba(31, 85, 135, 0.95);

}


.kbt-blog-card__category[data-category-color="Tourist Places"] {

    background:
        rgba(153, 101, 17, 0.95);

}


.kbt-blog-card__category[data-category-color="Taxi Service"] {

    background:
        rgba(194, 42, 42, 0.95);

}


.kbt-blog-card__category[data-category-color="Travel Guide"] {

    background:
        rgba(7, 68, 111, 0.95);

}


/* =========================================================
   21. CARD CONTENT
========================================================= */

.kbt-blog-card__content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        17px
        18px
        19px;

}


/* =========================================================
   22. CARD META
========================================================= */

.kbt-blog-card__meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    min-height: 19px;

    margin-bottom: 9px;

    color:
        #687585;

    font-size: 11px;

    font-weight: 500;

}


.kbt-blog-card__meta-item {

    display: inline-flex;

    align-items: center;

    gap: 5px;

}


.kbt-blog-card__meta-item i {

    color:
        var(--kbt-blog-navy-soft);

    font-size: 14px;

}


.kbt-blog-card__meta-dot {

    color:
        #b4bbc1;

}


/* =========================================================
   23. CARD TITLE
========================================================= */

.kbt-blog-card__title {

    margin:
        0 0 8px;

    font-family:
        var(--kbt-blog-heading);

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1.13;

    letter-spacing:
        -0.025em;

}


.kbt-blog-card__title a {

    color:
        var(--kbt-blog-navy);

    transition:
        color 0.25s ease;

}


.kbt-blog-card__title a:hover {

    color:
        #b77d18;

}


/* =========================================================
   24. CARD DESCRIPTION
========================================================= */

.kbt-blog-card__description {

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;

    overflow:
        hidden;

    margin:
        0;

    color:
        var(--kbt-blog-text-soft);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.58;

}


/* =========================================================
   25. READ MORE
========================================================= */

.kbt-blog-card__read-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        15px;

    color:
        #bd7f15;

    font-size:
        12px;

    font-weight:
        700;

}


.kbt-blog-card__read-more i {

    font-size:
        18px;

    transition:
        transform 0.25s ease;

}


.kbt-blog-card__read-more:hover {

    color:
        #8e5d08;

}


.kbt-blog-card__read-more:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   26. CARD INITIAL ANIMATION
========================================================= */

@keyframes kbtBlogCardReveal {

    from {

        opacity:
            0;

        transform:
            translateY(22px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.kbt-blog-card {

    animation:
        kbtBlogCardReveal 0.65s ease both;

}


.kbt-blog-card:nth-child(1) {
    animation-delay: 0.04s;
}


.kbt-blog-card:nth-child(2) {
    animation-delay: 0.08s;
}


.kbt-blog-card:nth-child(3) {
    animation-delay: 0.12s;
}


.kbt-blog-card:nth-child(4) {
    animation-delay: 0.16s;
}


.kbt-blog-card:nth-child(5) {
    animation-delay: 0.20s;
}


.kbt-blog-card:nth-child(6) {
    animation-delay: 0.24s;
}


.kbt-blog-card:nth-child(7) {
    animation-delay: 0.28s;
}


.kbt-blog-card:nth-child(8) {
    animation-delay: 0.32s;
}


.kbt-blog-card:nth-child(9) {
    animation-delay: 0.36s;
}


/* =========================================================
   27. HIDDEN CARD
========================================================= */

.kbt-blog-card.is-hidden {

    display:
        none;

}


/* =========================================================
   28. NO RESULTS
========================================================= */

.kbt-blog-no-results {

    padding:
        70px 20px;

    text-align:
        center;

}


.kbt-blog-no-results__icon {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 18px;

    border-radius:
        50%;

    color:
        var(--kbt-blog-navy);

    background:
        var(--kbt-blog-gold-soft);

}


.kbt-blog-no-results__icon i {

    font-size:
        30px;

}


.kbt-blog-no-results h3 {

    margin:
        0 0 8px;

    color:
        var(--kbt-blog-navy);

    font-family:
        var(--kbt-blog-heading);

    font-size:
        28px;

}


.kbt-blog-no-results p {

    max-width:
        520px;

    margin:
        0 auto 22px;

    color:
        var(--kbt-blog-text-soft);

    font-size:
        14px;

    line-height:
        1.7;

}


.kbt-blog-no-results__button {

    min-height:
        44px;

    padding:
        0 20px;

    border:
        0;

    border-radius:
        999px;

    color:
        #ffffff;

    background:
        var(--kbt-blog-navy);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.kbt-blog-no-results__button:hover {

    transform:
        translateY(-2px);

    background:
        var(--kbt-blog-navy-soft);

}


/* =========================================================
   29. PAGINATION
========================================================= */

.kbt-blog-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        34px;

}


.kbt-blog-pagination button {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #e3e5e7;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--kbt-blog-navy);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.25s ease;

}


.kbt-blog-pagination button:hover {

    border-color:
        var(--kbt-blog-gold);

    color:
        var(--kbt-blog-navy);

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 15px rgba(4, 28, 48, 0.08);

}


.kbt-blog-pagination button.active {

    border-color:
        var(--kbt-blog-gold);

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #d39a2d,
            #e5b44e
        );

    box-shadow:
        0 8px 18px rgba(214, 163, 58, 0.24);

}


.kbt-blog-pagination button i {

    font-size:
        18px;

}


/* =========================================================
   30. PREMIUM CTA
========================================================= */

.kbt-blog-cta {

    position:
        relative;

    overflow:
        hidden;

    padding:
        82px 0;

    background:
        #06243f;

}


.kbt-blog-cta::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 25, 43, 0.96) 0%,
            rgba(3, 31, 52, 0.80) 42%,
            rgba(3, 31, 52, 0.48) 100%
        ),
        url("../images/blog.webp");

    background-size:
        cover;

    background-position:
        center 58%;

    z-index:
        0;

}


.kbt-blog-cta::after {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -230px;

    top:
        -260px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        50%;

    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.025),
        0 0 0 160px rgba(255, 255, 255, 0.018);

    z-index:
        1;

}


.kbt-blog-cta .container {

    position:
        relative;

    z-index:
        2;

}


.kbt-blog-cta__inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

}


.kbt-blog-cta__content {

    max-width:
        730px;

}


.kbt-blog-cta__eyebrow {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.kbt-blog-cta__eyebrow::before {

    content:
        "";

    width:
        50px;

    height:
        2px;

    border-radius:
        99px;

    background:
        var(--kbt-blog-gold);

}


.kbt-blog-cta__content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--kbt-blog-heading);

    font-size:
        clamp(38px, 4vw, 58px);

    line-height:
        0.98;

    font-weight:
        700;

    letter-spacing:
        -0.035em;

}


.kbt-blog-cta__content h2 span {

    display:
        block;

    color:
        #ffffff;

}


.kbt-blog-cta__content p {

    max-width:
        620px;

    margin:
        20px 0 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   31. CTA BUTTONS
========================================================= */

.kbt-blog-cta__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.kbt-blog-cta__primary,
.kbt-blog-cta__secondary {

    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 22px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease;

}


.kbt-blog-cta__primary {

    color:
        #172b3d;

    background:
        linear-gradient(
            135deg,
            #dba83c,
            #f1c968
        );

    box-shadow:
        0 12px 28px rgba(214, 163, 58, 0.22);

}


.kbt-blog-cta__primary:hover {

    color:
        #172b3d;

    transform:
        translateY(-3px);

    box-shadow:
        0 17px 35px rgba(214, 163, 58, 0.30);

}


.kbt-blog-cta__secondary {

    color:
        #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.48);

    background:
        rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


.kbt-blog-cta__secondary:hover {

    color:
        #ffffff;

    transform:
        translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.8);

    background:
        rgba(255, 255, 255, 0.12);

}


/* =========================================================
   32. TABLET
========================================================= */

@media (max-width: 1199px) {

    .kbt-blog-page .container {

        width:
            min(100% - 36px, 1100px);

    }


    .kbt-blog-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .kbt-blog-search {

        width:
            100%;

        max-width:
            420px;

        flex-basis:
            auto;

    }


    .kbt-blog-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .kbt-blog-cta__inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/* =========================================================
   33. TABLET SMALL
========================================================= */

@media (max-width: 991px) {

    .kbt-journal-hero {

        min-height:
            350px;

    }


    .kbt-journal-hero__content {

        padding:
            58px 0 60px;

    }


    .kbt-journal-hero__title {

        font-size:
            clamp(44px, 7vw, 62px);

    }


    .kbt-blog-content {

        padding-top:
            28px;

    }


    .kbt-blog-card__image-wrap {

        height:
            220px;

    }


    .kbt-blog-card__title {

        font-size:
            21px;

    }


    .kbt-blog-cta {

        padding:
            70px 0;

    }

}


/* =========================================================
   34. MOBILE
========================================================= */

@media (max-width: 767px) {

    .kbt-blog-page .container {

        width:
            min(100% - 28px, 620px);

    }


    /* Hero */

    .kbt-journal-hero {

        min-height:
            330px;

        background-position:
            center center;

    }


    .kbt-journal-hero__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(2, 22, 40, 0.91),
                rgba(3, 28, 48, 0.63)
            );

    }


    .kbt-journal-hero__content {

        padding:
            48px 0 52px;

    }


    .kbt-journal-hero__breadcrumb {

        margin-bottom:
            20px;

        font-size:
            12px;

    }


    .kbt-journal-hero__eyebrow {

        font-size:
            10px;

        letter-spacing:
            0.13em;

    }


    .kbt-journal-hero__eyebrow::before {

        width:
            36px;

    }


    .kbt-journal-hero__title {

        max-width:
            500px;

        font-size:
            clamp(40px, 12vw, 54px);

        line-height:
            0.99;

    }


    .kbt-journal-hero__description {

        margin-top:
            17px;

        font-size:
            14px;

        line-height:
            1.65;

    }


    .kbt-journal-hero__line {

        width:
            58px;

        margin-top:
            21px;

    }


    /* Content */

    .kbt-blog-content {

        padding:
            24px 0 58px;

    }


    /* Toolbar */

    .kbt-blog-toolbar {

        gap:
            17px;

        margin-bottom:
            23px;

    }


    .kbt-blog-filters {

        width:
            100%;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding:
            2px 2px 9px;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;

    }


    .kbt-blog-filters::-webkit-scrollbar {

        display:
            none;

    }


    .kbt-filter-btn {

        flex:
            0 0 auto;

        min-height:
            40px;

        padding:
            0 14px;

        font-size:
            11px;

    }


    .kbt-blog-search {

        max-width:
            none;

    }


    .kbt-blog-search__input {

        height:
            44px;

    }


    /* Grid */

    .kbt-blog-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .kbt-blog-card {

        border-radius:
            15px;

    }


    .kbt-blog-card__image-wrap {

        height:
            220px;

    }


    .kbt-blog-card__content {

        padding:
            17px 17px 19px;

    }


    .kbt-blog-card__title {

        font-size:
            22px;

    }


    .kbt-blog-card__description {

        font-size:
            13px;

    }


    /* Pagination */

    .kbt-blog-pagination {

        margin-top:
            27px;

    }


    .kbt-blog-pagination button {

        width:
            40px;

        height:
            40px;

    }


    /* CTA */

    .kbt-blog-cta {

        padding:
            58px 0;

    }


    .kbt-blog-cta::before {

        background-position:
            62% center;

    }


    .kbt-blog-cta__inner {

        gap:
            27px;

    }


    .kbt-blog-cta__eyebrow {

        font-size:
            10px;

    }


    .kbt-blog-cta__content h2 {

        font-size:
            clamp(36px, 10vw, 48px);

    }


    .kbt-blog-cta__content p {

        margin-top:
            17px;

        font-size:
            13px;

        line-height:
            1.7;

    }


    .kbt-blog-cta__actions {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .kbt-blog-cta__primary,
    .kbt-blog-cta__secondary {

        width:
            100%;

        min-height:
            48px;

    }

}


/* =========================================================
   35. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .kbt-blog-page .container {

        width:
            calc(100% - 24px);

    }


    .kbt-journal-hero {

        min-height:
            315px;

    }


    .kbt-journal-hero__content {

        padding:
            42px 0 46px;

    }


    .kbt-journal-hero__title {

        font-size:
            39px;

        letter-spacing:
            -0.03em;

    }


    .kbt-journal-hero__description {

        max-width:
            350px;

        font-size:
            13px;

    }


    .kbt-blog-card__image-wrap {

        height:
            205px;

    }


    .kbt-blog-card__category {

        top:
            10px;

        right:
            10px;

        min-height:
            28px;

        padding:
            0 10px;

        font-size:
            9px;

    }


    .kbt-blog-card__content {

        padding:
            15px 15px 17px;

    }


    .kbt-blog-card__meta {

        font-size:
            10px;

    }


    .kbt-blog-card__title {

        font-size:
            20px;

        line-height:
            1.15;

    }


    .kbt-blog-card__description {

        font-size:
            12.5px;

        line-height:
            1.55;

    }


    .kbt-blog-card__read-more {

        font-size:
            11px;

    }


    .kbt-blog-cta__content h2 {

        font-size:
            35px;

    }

}


/* =========================================================
   36. EXTRA SMALL
========================================================= */

@media (max-width: 360px) {

    .kbt-blog-page .container {

        width:
            calc(100% - 20px);

    }


    .kbt-journal-hero__title {

        font-size:
            35px;

    }


    .kbt-blog-card__image-wrap {

        height:
            190px;

    }


    .kbt-blog-card__title {

        font-size:
            19px;

    }

}


/* =========================================================
   37. ACCESSIBILITY
========================================================= */

.kbt-blog-page a:focus-visible,
.kbt-blog-page button:focus-visible,
.kbt-blog-page input:focus-visible {

    outline:
        3px solid rgba(214, 163, 58, 0.35);

    outline-offset:
        3px;

}


/* =========================================================
   38. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kbt-blog-page *,
    .kbt-blog-page *::before,
    .kbt-blog-page *::after {

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* =========================================================
   39. PRINT
========================================================= */

@media print {

    .kbt-blog-toolbar,
    .kbt-blog-pagination,
    .kbt-blog-cta {

        display:
            none !important;

    }


    .kbt-journal-hero {

        min-height:
            250px;

    }


    .kbt-blog-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .kbt-blog-card {

        box-shadow:
            none;

        border:
            1px solid #ddd;

    }

}
/* =========================================================
   SEARCH LABEL - ACCESSIBILITY ONLY
========================================================= */

.kbt-blog-page .visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}
/* =========================================================
   BLOG CARD IMAGE - SHOW FULL IMAGE
========================================================= */

.kbt-blog-card__image-wrap {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}

.kbt-blog-card__image-link {
    display: block;
    width: 100%;
    height: auto !important;
}

.kbt-blog-card__image {
    display: block;
    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none;
}


/* Keep premium hover without cropping */

.kbt-blog-card:hover .kbt-blog-card__image {
    transform: scale(1.025);
}
/* =========================================================
   FLOATING CONTACT ACTIONS
   PREMIUM FIXED ALIGNMENT
========================================================= */

.kbt-floating-contact {
    position: fixed !important;

    right: 28px !important;
    bottom: 100px !important;

    z-index: 99999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    gap: 14px !important;

    pointer-events: none;
}


/* =========================================================
   ACTION
========================================================= */

.kbt-floating-action {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 58px;

    border-radius: 999px;

    text-decoration: none;

    pointer-events: auto;

    overflow: visible;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.10);

    transition:
        width 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   ICON
========================================================= */

.kbt-floating-icon {
    position: relative;

    z-index: 3;

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 26px;

    box-sizing: border-box;

    transition:
        transform 0.35s ease,
        font-size 0.35s ease;
}


/* =========================================================
   LABEL
========================================================= */

.kbt-floating-label {
    position: absolute;

    left: 18px;
    right: auto;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    white-space: nowrap;

    padding: 10px 16px;

    border-radius: 999px;

    background: #ffffff;

    color: #10233f;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    line-height: 1;

    text-transform: uppercase;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 1;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   WHATSAPP
========================================================= */

.kbt-floating-whatsapp {
    background: #25D366;

    color: #ffffff;
}


/* WhatsApp icon */

.kbt-floating-whatsapp .kbt-floating-icon {
    background:
        linear-gradient(
            145deg,
            #25D366,
            #128C7E
        );
}


/* =========================================================
   PHONE
========================================================= */

.kbt-floating-phone {
    background: #D5A84A;

    color: #ffffff;
}


/* Phone icon */

.kbt-floating-phone .kbt-floating-icon {
    background:
        linear-gradient(
            145deg,
            #D5A84A,
            #9B6D1F
        );
}


/* =========================================================
   HOVER EXPANSION
========================================================= */

.kbt-floating-action:hover {

    width: 220px;

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   SHOW LABEL
========================================================= */

.kbt-floating-action:hover
.kbt-floating-label {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   ICON HOVER
========================================================= */

.kbt-floating-action:hover
.kbt-floating-icon {

    transform:
        rotate(5deg)
        scale(1.04);
}


/* =========================================================
   PULSE RING
========================================================= */

.kbt-floating-whatsapp::before,
.kbt-floating-phone::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    z-index: -1;
}


/* WhatsApp pulse */

.kbt-floating-whatsapp::before {

    border:
        1px solid
        rgba(37, 211, 102, 0.55);

    animation:
        kbtWhatsappPulse
        2.4s
        infinite;
}


/* Phone pulse */

.kbt-floating-phone::before {

    border:
        1px solid
        rgba(213, 168, 74, 0.55);

    animation:
        kbtPhonePulse
        2.8s
        infinite;
}


/* =========================================================
   WHATSAPP PULSE
========================================================= */

@keyframes kbtWhatsappPulse {

    0% {

        transform:
            scale(0.95);

        opacity: 0.8;
    }

    70% {

        transform:
            scale(1.35);

        opacity: 0;
    }

    100% {

        transform:
            scale(1.35);

        opacity: 0;
    }
}


/* =========================================================
   PHONE PULSE
========================================================= */

@keyframes kbtPhonePulse {

    0% {

        transform:
            scale(0.95);

        opacity: 0.7;
    }

    70% {

        transform:
            scale(1.3);

        opacity: 0;
    }

    100% {

        transform:
            scale(1.3);

        opacity: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .kbt-floating-contact {

        right: 16px !important;

        bottom: 60px !important;

        gap: 10px !important;
    }


    .kbt-floating-action {

        width: 52px;

        height: 52px;

        flex-basis: 52px;
    }


    .kbt-floating-icon {

        width: 52px;

        height: 52px;

        flex-basis: 52px;

        font-size: 23px;
    }


    .kbt-floating-label {

        display: none;
    }


    .kbt-floating-action:hover {

        width: 52px;

        transform:
            translateY(-3px);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .kbt-floating-contact {

        right: 12px !important;

        bottom: 14px !important;

        gap: 9px !important;
    }


    .kbt-floating-action {

        width: 49px;

        height: 49px;

        flex-basis: 49px;
    }


    .kbt-floating-icon {

        width: 49px;

        height: 49px;

        flex-basis: 49px;

        font-size: 21px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kbt-floating-action,
    .kbt-floating-icon,
    .kbt-floating-label {

        transition: none;
    }


    .kbt-floating-whatsapp::before,
    .kbt-floating-phone::before {

        animation: none;
    }
}

/* =========================================================
   KBT BLOG — BACK TO TOP
   ========================================================= */

.kbt-detail-back-top {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;

    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(213, 154, 42, 0.45) !important;
    border-radius: 50% !important;

    background: linear-gradient(
        135deg,
        #E8B64F,
        #D59A2A
    ) !important;

    color: #0B2342 !important;

    cursor: pointer !important;

    z-index: 99999 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(18px) !important;

    box-shadow:
        0 14px 35px rgba(6, 24, 47, 0.22),
        0 4px 12px rgba(213, 154, 42, 0.18) !important;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease !important;
}


/* SHOW */

.kbt-detail-back-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}


/* ICON */

.kbt-detail-back-top i {
    display: block !important;

    font-size: 22px !important;
    line-height: 1 !important;

    color: #0B2342 !important;

    transition:
        transform 0.3s ease,
        color 0.3s ease !important;
}


/* HOVER */

.kbt-detail-back-top:hover {
    background: linear-gradient(
        135deg,
        #0B2342,
        #153A65
    ) !important;

    color: #E8B64F !important;

    transform: translateY(-5px) !important;

    box-shadow:
        0 18px 40px rgba(6, 24, 47, 0.28),
        0 6px 16px rgba(213, 154, 42, 0.22) !important;
}


.kbt-detail-back-top:hover i {
    color: #E8B64F !important;
    transform: translateY(-2px);
}


/* TABLET */

@media (max-width: 767px) {

    .kbt-detail-back-top {
        right: 16px !important;
        bottom: 16px !important;

        width: 48px !important;
        height: 48px !important;
    }

    .kbt-detail-back-top i {
        font-size: 20px !important;
    }
}


/* MOBILE */

@media (max-width: 480px) {

    .kbt-detail-back-top {
        right: 13px !important;
        bottom: 13px !important;

        width: 45px !important;
        height: 45px !important;
    }

    .kbt-detail-back-top i {
        font-size: 18px !important;
    }
}
/* =========================================================
   MOBILE FLOATING BUTTON + BACK TO TOP
   FINAL OVERLAP FIX
========================================================= */

@media (max-width: 767px) {

    /* -------------------------------
       FLOATING WHATSAPP / CALL
    -------------------------------- */

    .kbt-floating-contact {
        position: fixed !important;

        right: 14px !important;
        bottom: 88px !important;

        z-index: 99999 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;

        gap: 9px !important;
    }


    .kbt-floating-btn {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        flex: 0 0 46px !important;

        border-radius: 50% !important;
    }


    .kbt-floating-btn > i {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;

        font-size: 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* Hide expanded labels on mobile */
    .kbt-floating-label {
        display: none !important;
    }


    /* -------------------------------
       BACK TO TOP
    -------------------------------- */

    .kbt-back-to-top,
    .kbt-detail-back-top {
        position: fixed !important;

        right: 14px !important;
        bottom: 18px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        z-index: 99990 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        transform: translateY(15px);

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease,
            background .3s ease;
    }


    .kbt-back-to-top.is-visible,
    .kbt-detail-back-top.is-visible,
    .kbt-back-to-top.show,
    .kbt-detail-back-top.show,
    .kbt-back-to-top.active,
    .kbt-detail-back-top.active {
        transform: translateY(0) !important;
    }


    .kbt-back-to-top i,
    .kbt-detail-back-top i {
        font-size: 18px !important;
        line-height: 1 !important;
    }

}