:root {
    --font-family-inter: 'Inter', sans-serif;
    --font-family-plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;
    --text-rgb-12-28-69: rgba(12, 28, 69, 0.5);
    --text-rgb-252-252-252: rgba(252, 252, 252, 1);
    --text-rgb-255-117-39: rgba(255, 117, 39, 1);
    --text-rgb-246-249-252: rgba(246, 249, 252, 0.6000000238418579);
    --text-rgb-91-99-117: rgba(91, 99, 117, 1);
    --text-white: rgba(255, 255, 255, 1);
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Prototype Links */
a.prototype-link {
    text-decoration: none;
    color: inherit;
    display: contents;
}

/*========================================= BLOG HERO Namespace : bloghero-* =========================================*/
.bloghero-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background-color: rgba(12, 28, 69, 1);
}

/* Decorative Glow */
.bloghero-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 107, 0, .10);
    top: -140px;
    right: -140px;
    filter: blur(20px);
}

.bloghero-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    bottom: -140px;
    left: -120px;
}

/*========================= Badge =========================*/
.bloghero-badge {
    display: inline-block;
    border-radius: 50px;
    background-color: rgba(255, 117, 39, 0.15000000596046448);
    padding: 4px 12px 4px 12px;
    font-family: "Inter";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6000000238418579px;
    line-height: 16px;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--text-rgb-255-117-39);
}

/*========================= Title =========================*/
.bloghero-title {
    margin-bottom: 18px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.9599999785423279px;
    line-height: 48px;
    color: var(--text-rgb-246-249-252);
}

/*========================= Description =========================*/
.bloghero-description {
    max-width: 700px;
    margin: 0 auto 38px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-246-249-252);
}

/*========================= Search =========================*/
.bloghero-search {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 60px;
    padding: 8px 8px 8px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

.bloghero-search i {
    font-size: 18px;
    color: #6D7890;
    margin-left: 16px;
    margin-right: 10px;
}

.bloghero-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-91-99-117);
}

.bloghero-btn {
    border: none;
    background: #FF6B00;
    height: 46px;
    transition: .35s;
    padding: 8px 20px 8px 20px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-252-252-252);
}

.bloghero-btn:hover {
    background: #ff7b22;
}

/*========================= Tags =========================*/
.bloghero-tags {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bloghero-tag {
    padding: 6px 16px 6px 16px;
    transition: .35s;
    background-color: rgba(246, 249, 252, 0.05000000074505806);
    border: 1px solid rgba(246, 249, 252, 0.20000000298023224);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-rgb-246-249-252);
}

.bloghero-tag:hover {
    background: #FF6B00;
    border-color: #FF6B00;
    color: #fff;
}

.bloghero-tag.active {
    background-color: rgba(255, 117, 39, 1);
    border: 1px solid rgba(255, 117, 39, 1);
    color: #fff;
}

/*========================================= Responsive =========================================*/
@media(max-width:1199px) {
    .bloghero-title {
        font-size: 48px;
    }
}

@media(max-width:991px) {
    .bloghero-section {
        padding: 90px 0;
    }

    .bloghero-title {
        font-size: 40px;
    }

    .bloghero-description {
        font-size: 16px;
    }
}

@media(max-width:767px) {
    .bloghero-section {
        padding: 70px 0;
    }

    .bloghero-badge {
        font-size: 11px;
        padding: 7px 14px;
    }

    .bloghero-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .bloghero-description {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    /* Search */
    .bloghero-search {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 16px;
    }

    .bloghero-search i {
        margin-left: 0;
    }

    .bloghero-input {
        width: 100%;
        margin: 12px 0;
    }

    .bloghero-btn {
        width: 100%;
    }

    /* Tags */
    .bloghero-tags {
        gap: 8px;
    }

    .bloghero-tag {
        font-size: 13px;
        padding: 8px 14px;
    }
}

@media(max-width:480px) {
    .bloghero-section {
        padding: 60px 0;
    }

    .bloghero-title {
        font-size: 26px;
    }

    .bloghero-description {
        font-size: 14px;
    }

    .bloghero-tag {
        width: 100%;
        text-align: center;
    }
}

/*========================================= FEATURED BLOG Namespace : featureblog-* =========================================*/
.featureblog-section {
    padding: 80px 0;
    background: #fff;
}

/*========================= Card =========================*/
.featureblog-card {
    border-radius: 28px;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .08);
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(224, 229, 235, 0.6000000238418579);
}

.featureblog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
}

/*========================= Image =========================*/
.featureblog-image {
    overflow: hidden;
    height: 100%;
}

.featureblog-image img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    transition: .5s;
}

.featureblog-card:hover .featureblog-image img {
    transform: scale(1.05);
}

/*========================= Content =========================*/
.featureblog-content {
    /* padding: 60px;
     */
}

.featureblog-badge {
    display: inline-block;
    padding: 4px 12px 4px 12px;
    text-transform: uppercase;
    margin-bottom: 22px;
    background-color: rgba(255, 117, 39, 0.10000000149011612);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6000000238418579px;
    line-height: 16px;
    color: var(--text-rgb-255-117-39);
}

.featureblog-title {
    margin-bottom: 18px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-rgb-12-28-69);
}

.featureblog-description {
    margin-bottom: 24px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-rgb-91-99-117);
}

.featureblog-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-rgb-91-99-117);
}

.featureblog-date i {
    color: #162B59;
}

/*========================= Button =========================*/
.featureblog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .35s;
    gap: 8px;
    padding: 10px 20px 10px 20px;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-rgb-252-252-252);
}

.featureblog-btn:hover {
    background: #162B59;
    color: #fff;
}

.featureblog-btn i {
    transition: .3s;
}

.featureblog-btn:hover i {
    transform: translateX(5px);
}

/*========================================= Responsive =========================================*/
@media (max-width:1199px) {
    .featureblog-content {
        padding: 45px;
    }

    .featureblog-title {
        font-size: 36px;
    }
}

@media (max-width:991px) {
    .featureblog-section {
        padding: 80px 0;
    }

    .featureblog-image img {
        min-height: 350px;
    }

    .featureblog-content {
        padding: 35px;
    }

    .featureblog-title {
        font-size: 32px;
    }

    .featureblog-description {
        font-size: 16px;
    }
}

@media (max-width:767px) {
    .featureblog-section {
        padding: 60px 0;
    }

    .featureblog-card {
        border-radius: 22px;
    }

    .featureblog-image img {
        min-height: 250px;
    }

    .featureblog-content {
        padding: 28px 22px;
    }

    .featureblog-badge {
        font-size: 11px;
        padding: 7px 14px;
    }

    .featureblog-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .featureblog-description {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .featureblog-date {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .featureblog-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width:480px) {
    .featureblog-section {
        padding: 50px 0;
    }

    .featureblog-card {
        border-radius: 18px;
    }

    .featureblog-image img {
        min-height: 220px;
    }

    .featureblog-content {
        padding: 22px 18px;
    }

    .featureblog-title {
        font-size: 22px;
    }

    .featureblog-description {
        font-size: 14px;
    }

    .featureblog-btn {
        padding: 14px 24px;
        font-size: 15px;
    }
}

/*========================================= LATEST BLOG Namespace : latestblog-* =========================================*/
.latestblog-section {
    padding: 40px 0;
    background-color: rgba(247, 245, 241, 1);
}

/* Heading */
.latestblog-title {
    margin-bottom: 15px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    color: var(--text-rgb-12-28-69);
}

/* Card */
.latestblog-card {
    background: #fff;
    border: 1px solid #E8EDF5;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    transition: .35s;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .05);
}

.latestblog-card:hover {
    transform: translateY(-8px);
    border-color: #FF6B00;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .12);
}

/* Image */
.latestblog-image {
    display: block;
    overflow: hidden;
}

.latestblog-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: .45s;
}

.latestblog-card:hover .latestblog-image img {
    transform: scale(1.08);
}

/* Content */
.latestblog-content {
    padding: 24px;
}

/* Category */
.latestblog-category {
    display: inline-block;
    color: #FF6B00;
    font-family: "Inter";
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.latestblog-content h3 {
    margin: 0 0 12px;
}

.latestblog-content h3 a {
    color: #162B59;
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    transition: .3s;
}

.latestblog-card:hover h3 a {
    color: #FF6B00;
}

/* Description */
.latestblog-content p {
    margin: 0 0 22px;
    font-family: "Inter";
    font-size: 15px;
    line-height: 1.8;
    color: #6D7890;
}

/* Footer */
.latestblog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.latestblog-footer span {
    font-family: "Inter";
    font-size: 13px;
    color: #9AA3B5;
}

.latestblog-footer span i {
    margin-right: 5px;
}

.latestblog-footer a {
    color: #FF6B00;
    text-decoration: none;
    font-family: "Inter";
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

.latestblog-footer a:hover {
    color: #162B59;
}

.latestblog-footer a i {
    transition: .3s;
}

.latestblog-footer a:hover i {
    transform: translateX(5px);
}

/*========================================= Responsive =========================================*/
@media(max-width:1199px) {
    .latestblog-section {
        padding: 90px 0;
    }

    .latestblog-title {
        font-size: 42px;
    }

    .latestblog-content h3 a {
        font-size: 22px;
    }
}

@media(max-width:991px) {
    .latestblog-section {
        padding: 80px 0;
    }

    .latestblog-title {
        font-size: 36px;
    }

    .latestblog-image img {
        height: 220px;
    }

    .latestblog-content {
        padding: 22px;
    }

    .latestblog-content h3 a {
        font-size: 20px;
    }

    .latestblog-content p {
        font-size: 14px;
    }
}

@media(max-width:767px) {
    .latestblog-section {
        padding: 60px 0;
    }

    .latestblog-title {
        font-size: 30px;
    }

    .latestblog-card {
        border-radius: 20px;
    }

    .latestblog-image img {
        height: 220px;
    }

    .latestblog-content {
        padding: 20px;
    }

    .latestblog-content h3 a {
        font-size: 19px;
    }

    .latestblog-content p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .latestblog-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media(max-width:575px) {
    .latestblog-section {
        padding: 50px 0;
    }

    .latestblog-title {
        font-size: 26px;
    }

    .latestblog-card {
        max-width: 380px;
        margin: auto;
    }

    .latestblog-image img {
        height: 210px;
    }

    .latestblog-content {
        padding: 18px;
    }

    .latestblog-content h3 a {
        font-size: 18px;
    }

    .latestblog-content p {
        font-size: 13px;
    }

    .latestblog-footer {
        font-size: 13px;
    }
}

/*========================================= NEWSLETTER Namespace : newsletter-* =========================================*/
.newsletter-section {
    padding: 70px 0;
    background-color: rgba(254, 253, 251, 1);
}

/*========================= Box =========================*/
.newsletter-box {
    background: #fff;
    border: 1px solid #E8EDF5;
    border-radius: 28px;
    padding: 60px 55px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
    transition: .35s;
}

.newsletter-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(15, 23, 42, .10);
}

/*========================= Title =========================*/
.newsletter-title {
    margin: 0 0 12px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    color: var(--text-rgb-12-28-69);
}

/*========================= Description =========================*/
.newsletter-text {
    margin: 0 auto 32px;
    max-width: 520px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-rgb-91-99-117);
}

/*========================= Form =========================*/
.newsletter-form {
    max-width: 560px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Input */
.newsletter-input {
    flex: 1;
    height: 56px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(224, 229, 235, 1);
    border-radius: 33554400px;
    padding: 13px 20px 14px 20px;
    outline: none;
    transition: .3s;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 14px;
    color: var(--text-rgb-12-28-69);
}

.newsletter-input:focus {
    border-color: #FF6B00;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, .10);
}

/* Button */
.newsletter-btn {
    border: none;
    height: 56px;
    padding: 0 32px;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    transition: .35s;
    box-shadow: 0 12px 25px rgba(255, 107, 0, .25);
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-rgb-252-252-252);
}

.newsletter-btn:hover {
    background: #162B59;
    color: #fff;
    transform: translateY(-2px);
}

/*========================================= Responsive =========================================*/
@media (max-width:1199px) {
    .newsletter-title {
        font-size: 40px;
    }
}

@media (max-width:991px) {
    .newsletter-section {
        padding: 80px 0;
    }

    .newsletter-box {
        padding: 45px 35px;
    }

    .newsletter-title {
        font-size: 34px;
    }

    .newsletter-text {
        font-size: 16px;
    }
}

@media (max-width:767px) {
    .newsletter-section {
        padding: 60px 0;
    }

    .newsletter-box {
        padding: 35px 22px;
        border-radius: 22px;
    }

    .newsletter-title {
        font-size: 28px;
    }

    .newsletter-text {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 15px;
    }

    .newsletter-input {
        width: 100%;
    }

    .newsletter-btn {
        width: 100%;
    }
}

@media (max-width:480px) {
    .newsletter-section {
        padding: 50px 0;
    }

    .newsletter-box {
        padding: 28px 18px;
        border-radius: 18px;
    }

    .newsletter-title {
        font-size: 24px;
    }

    .newsletter-text {
        font-size: 14px;
    }

    .newsletter-input, .newsletter-btn {
        height: 52px;
        font-size: 14px;
    }
}


/* DETAILS PAGE CSS */
/* DETAILS PAGE CSS */
/* DETAILS PAGE CSS */
/* DETAILS PAGE CSS */
/* DETAILS PAGE CSS */

/*=========================================
BLOG DETAILS HERO
Namespace : blogdetailshero-*
=========================================*/
.blogdetailshero-section {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    display: flex;
    align-items: flex-end;
    padding: 140px 0 90px;
    background-color: rgba(12, 28, 69, 1);
}

/* Background Image */
.blogdetailshero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay */
.blogdetailshero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(12, 24, 55, .30) 0%, rgba(22, 43, 89, .55) 45%, rgba(22, 43, 89, .92) 100%);
}

.blogdetailshero-section .container {
    position: relative;
    z-index: 5;
}

/*====================================== Breadcrumb ======================================*/
.blogdetailshero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    font-family: "Inter";
    font-size: 15px;
}

.blogdetailshero-breadcrumb a {
    transition: .3s;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-rgb-246-249-252);
}

.blogdetailshero-breadcrumb a:hover {
    color: #FF6B00;
}

.blogdetailshero-breadcrumb span {
    color: #fff;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
}

.blogdetailshero-breadcrumb i {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
}

/*====================================== Category ======================================*/
.blogdetailshero-category {
    display: inline-block;
    background: #FF6B00;
    padding: 4px 12px 4px 12px;
    margin-bottom: 26px;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.550000011920929px;
    line-height: 16.5px;
    color: var(--text-white);
}

/*====================================== Title ======================================*/
.blogdetailshero-title {
    margin-bottom: 35px;
    max-width: 900px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.9599999785423279px;
    line-height: 48px;
    color: var(--text-rgb-246-249-252);
}

/*====================================== Meta ======================================*/
.blogdetailshero-meta {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}

.blogdetailshero-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-rgb-246-249-252);
}

.blogdetailshero-meta-item i {
    color: #fff;
    font-size: 18px;
}

/*========================================= Responsive =========================================*/
@media(max-width:1200px) {
    .blogdetailshero-title {
        font-size: 58px;
    }
}

@media(max-width:992px) {
    .blogdetailshero-section {
        min-height: 620px;
        padding: 120px 0 70px;
    }

    .blogdetailshero-title {
        font-size: 48px;
    }

    .blogdetailshero-meta {
        gap: 25px;
    }

    .blogdetailshero-meta-item {
        font-size: 15px;
    }
}

@media(max-width:768px) {
    .blogdetailshero-section {
        min-height: 560px;
        padding: 100px 0 55px;
    }

    .blogdetailshero-breadcrumb {
        font-size: 13px;
        gap: 8px;
        margin-bottom: 18px;
    }

    .blogdetailshero-category {
        font-size: 11px;
        padding: 8px 18px;
        margin-bottom: 18px;
    }

    .blogdetailshero-title {
        font-size: 34px;
        line-height: 1.18;
        margin-bottom: 25px;
    }

    .blogdetailshero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .blogdetailshero-meta-item {
        font-size: 14px;
    }

    .blogdetailshero-meta-item i {
        font-size: 16px;
    }
}

@media(max-width:480px) {
    .blogdetailshero-section {
        min-height: 500px;
        padding: 90px 0 45px;
    }

    .blogdetailshero-title {
        font-size: 28px;
    }

    .blogdetailshero-breadcrumb {
        font-size: 12px;
    }

    .blogdetailshero-category {
        font-size: 10px;
        padding: 7px 15px;
    }

    .blogdetailshero-meta-item {
        font-size: 13px;
    }
}

/*========================================= BLOG CTA Namespace : blogcta-* =========================================*/
.blogcta-section {
    position: relative;
    overflow: hidden;
    padding: 80px 291.5px 80px 291.5px;
    background-color: rgba(12, 28, 69, 1);
}

/* Decorative Glow */
.blogcta-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 107, 0, .08);
    top: -150px;
    right: -120px;
    filter: blur(20px);
}

.blogcta-section::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    bottom: -130px;
    left: -120px;
}

/*========================= Title =========================*/
.blogcta-title {
    margin-bottom: 20px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    color: var(--text-rgb-246-249-252);
}

/*========================= Description =========================*/
.blogcta-text {
    /* max-width: 780px;
     */
    margin: 0 auto 40px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-rgb-246-249-252);
}

/*========================= Button =========================*/
.blogcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    transition: .35s;
    box-shadow: 0 20px 45px rgba(255, 107, 0, .30);
    position: relative;
    z-index: 2;
    padding: 14px 28px 14px 28px;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-rgb-252-252-252);
}

.blogcta-btn:hover {
    background: #ff7a1f;
    color: #fff;
    transform: translateY(-4px);
}

.blogcta-btn i {
    transition: .3s;
}

.blogcta-btn:hover i {
    transform: translateX(6px);
}

/*========================================= Responsive =========================================*/
@media (max-width:1199px) {
    .blogcta-title {
        font-size: 48px;
    }

    .blogcta-text {
        font-size: 18px;
    }
}

@media (max-width:991px) {
    .blogcta-section {
        padding: 90px 0;
    }

    .blogcta-title {
        font-size: 40px;
    }

    .blogcta-text {
        font-size: 17px;
        margin-bottom: 34px;
    }

    .blogcta-btn {
        height: 58px;
        min-width: 210px;
    }
}

@media (max-width:767px) {
    .blogcta-section {
        padding: 70px 0;
    }

    .blogcta-title {
        font-size: 32px;
        line-height: 1.25;
    }

    .blogcta-text {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .blogcta-btn {
        width: 100%;
        max-width: 300px;
        height: 54px;
        font-size: 16px;
    }
}

@media (max-width:480px) {
    .blogcta-section {
        padding: 60px 0;
    }

    .blogcta-title {
        font-size: 26px;
    }

    .blogcta-text {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .blogcta-btn {
        width: 100%;
        height: 52px;
        font-size: 15px;
        padding: 0 20px;
    }
}

/*========================================= BLOG CONTENT Namespace : blogcontent-* =========================================*/
.blogcontent-section {
    padding: 90px 0;
    background: #fff;
}

/*========================= Sidebar =========================*/
.blogcontent-sidebar {
    position: sticky;
    top: 110px;
}

.blogcontent-card {
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .05);
    background-color: rgba(247, 245, 241, 1);
    border: 1px solid rgba(224, 229, 235, 0.6000000238418579);
    border-radius: 24px;
}

.blogcontent-card-title {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.550000011920929px;
    line-height: 16.5px;
    color: var(--text-rgb-255-117-39);
}

/*========================= Table Of Contents =========================*/
.blogcontent-toc {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blogcontent-toc li {
    margin-bottom: 14px;
}

.blogcontent-toc li:last-child {
    margin-bottom: 0;
}

.blogcontent-toc a {
    transition: .3s;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 14px;
    line-height: 19.25px;
    color: var(--text-rgb-91-99-117);
}

.blogcontent-toc a:hover {
    color: #FF6B00;
}

/*========================= Progress =========================*/
.blogcontent-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: "Inter";
    font-size: 14px;
    color: #162B59;
}

.blogcontent-progress-head span {
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-rgb-91-99-117);
}

.blogcontent-progress {
    width: 100%;
    height: 8px;
    background: #EEF2F8;
    border-radius: 20px;
    overflow: hidden;
}

.blogcontent-progress-bar {
    width: 0;
    height: 100%;
    background: #FF6B00;
    border-radius: 20px;
    transition: .25s;
}

/*========================= Share =========================*/
.blogcontent-share {
    display: flex;
    gap: 12px;
}

.blogcontent-share a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #E8EDF5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #162B59;
    text-decoration: none;
    transition: .3s;
}

.blogcontent-share a:hover {
    background: #FF6B00;
    border-color: #FF6B00;
    color: #fff;
}

/*========================= Content =========================*/
.blogcontent-body p {
    margin-bottom: 22px;
    font-family: var(--font-family-inter);
    font-weight: normal;
    font-size: 18px;
    line-height: 29.25px;
    color: var(--text-rgb-12-28-69);
}

.blogcontent-body section {
    margin-top: 45px;
}

.blogcontent-body h2 {
    margin-bottom: 18px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    color: var(--text-rgb-12-28-69);
}

/*========================= CTA =========================*/
.blogcontent-cta {
    margin-top: 70px;
    padding: 45px;
    gap: 16px;
    padding: 36px;
    background-color: rgba(247, 245, 241, 1);
    border: 1px solid rgba(224, 229, 235, 0.6000000238418579);
    border-radius: 28px;
}

.blogcontent-cta h3 {
    margin-bottom: 16px;
    font-family: var(--font-family-plus-jakarta-sans);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6000000238418579px;
    line-height: 36px;
    color: var(--text-rgb-12-28-69);
}

.blogcontent-cta p {
    font-family: var(--font-family-inter) !important;
    font-weight: normal !important;
    font-size: 18px !important;
    line-height: 29.25px !important;
    color: var(--text-rgb-12-28-69) !important;
}

.blogcontent-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px 12px 24px;
    background-color: rgba(255, 117, 39, 1);
    border-radius: 33554400px;
    text-decoration: none;
    transition: .35s;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-rgb-252-252-252);
}

.blogcontent-btn:hover {
    background: #162B59;
    color: #fff;
}

.blogcontent-btn i {
    transition: .3s;
}

.blogcontent-btn:hover i {
    transform: translateX(5px);
}

/*========================================= Responsive =========================================*/
@media(max-width:1199px) {
    .blogcontent-body h2 {
        font-size: 36px;
    }
}

@media(max-width:991px) {
    .blogcontent-section {
        padding: 70px 0;
    }

    /* Sidebar becomes normal */
    .blogcontent-sidebar {
        position: static;
        margin-bottom: 35px;
    }

    .blogcontent-body h2 {
        font-size: 32px;
    }

    .blogcontent-body p {
        font-size: 16px;
    }

    .blogcontent-cta {
        padding: 35px;
    }

    .blogcontent-cta h3 {
        font-size: 30px;
    }
}

@media(max-width:767px) {
    .blogcontent-section {
        padding: 55px 0;
    }

    .blogcontent-card {
        padding: 18px;
    }

    .blogcontent-body h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    .blogcontent-body p {
        font-size: 15px;
        line-height: 1.8;
    }

    .blogcontent-share {
        justify-content: center;
    }

    .blogcontent-cta {
        padding: 28px 22px;
        text-align: center;
    }

    .blogcontent-cta h3 {
        font-size: 24px;
    }

    .blogcontent-btn {
        width: 100%;
        justify-content: center;
    }
}

@media(max-width:480px) {
    .blogcontent-body h2 {
        font-size: 22px;
    }

    .blogcontent-body p {
        font-size: 14px;
    }

    .blogcontent-card {
        border-radius: 16px;
    }

    .blogcontent-cta {
        border-radius: 18px;
        padding: 22px 18px;
    }

    .blogcontent-cta h3 {
        font-size: 21px;
    }

    .blogcontent-btn {
        height: 52px;
        font-size: 15px;
    }
}