/* Start custom CSS for shortcode, class: .elementor-element-0b6b415 *//* =========================================================
   THE FYMOUS - SINGLE POST
   ========================================================= */


/* =========================================================
   MAIN ARTICLE
   ========================================================= */

.fymous-single-post {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    /* FIXED HEADER KE LIYE SPACE */
    padding: 125px 25px 0;

    box-sizing: border-box;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.fymous-category {
    width: 100%;

    text-align: center;

    margin: 0 0 18px;
}

.fymous-category a {
    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    color: #111;
}


/* =========================================================
   TITLE
   ========================================================= */

.fymous-title {
    width: 100%;

    max-width: 950px;

    margin: 0 auto 20px !important;

    padding: 0;

    text-align: center;

    font-size: 56px !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    letter-spacing: -1.5px;
}


/* =========================================================
   AUTHOR / DATE
   ========================================================= */

.fymous-meta {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 auto 40px;

    color: #666;

    font-size: 14px;

    line-height: 1.5;
}

.fymous-meta-separator {
    color: #aaa;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.fymous-featured {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto 50px;
}

.fymous-featured-image {
    display: block;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    border-radius: 12px;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.fymous-content {
    width: 100%;

    max-width: 780px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.8;

    color: #222;
}

.fymous-content p {
    margin: 0 0 25px;
}


/* =========================================================
   ARTICLE HEADINGS
   ========================================================= */

.fymous-content h2 {
    margin: 45px 0 20px;

    font-size: 32px;

    line-height: 1.3;

    font-weight: 700;
}

.fymous-content h3 {
    margin: 35px 0 18px;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 700;
}


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

.fymous-content img {
    display: block;

    max-width: 100%;

    height: auto;

    margin: 35px auto;

    border-radius: 10px;
}


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

.fymous-content blockquote {
    margin: 35px 0;

    padding: 20px 25px;

    border-left: 4px solid #111;

    font-size: 21px;

    line-height: 1.6;

    font-style: italic;
}


/* =========================================================
   THE FYMOUS BRANDING SECTION
   ========================================================= */

.fymous-branding {
    display: block !important;

    width: 100vw !important;

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    margin-top: 90px;

    background: #f7f7f7;

    border-top: 1px solid #e5e5e5;

    overflow: visible;
}


/* =========================================================
   BRANDING INNER
   ========================================================= */

.fymous-branding-inner {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 70px 25px 65px;

    box-sizing: border-box;

    text-align: center;
}


/* =========================================================
   LOGO WRAPPER
   ========================================================= */

.fymous-logo-wrapper {
    display: block !important;

    width: 100%;

    margin: 0 auto;

    text-align: center;

    overflow: visible;
}


/* =========================================================
   THE FYMOUS LOGO
   ========================================================= */

.fymous-branding-logo-light {
    display: block !important;
}

.fymous-branding-logo-dark {
    display: none !important;
}

.fymous-branding-logo {
    visibility: visible !important;

    opacity: 1 !important;

    width: 360px !important;

    max-width: 85% !important;

    height: auto !important;

    margin: 0 auto 22px !important;

    padding: 0 !important;

    object-fit: contain !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   DARK MODE - SINGLE POST BRANDING LOGO
   ========================================================= */

html.dark-mode .fymous-single-post .fymous-branding-logo-light,
body.dark-mode .fymous-single-post .fymous-branding-logo-light,

html.darkmode .fymous-single-post .fymous-branding-logo-light,
body.darkmode .fymous-single-post .fymous-branding-logo-light,

html.dark .fymous-single-post .fymous-branding-logo-light,
body.dark .fymous-single-post .fymous-branding-logo-light,

html.is-dark .fymous-single-post .fymous-branding-logo-light,
body.is-dark .fymous-single-post .fymous-branding-logo-light,

html.theme-dark .fymous-single-post .fymous-branding-logo-light,
body.theme-dark .fymous-single-post .fymous-branding-logo-light,

html[data-theme="dark"] .fymous-single-post .fymous-branding-logo-light,
body[data-theme="dark"] .fymous-single-post .fymous-branding-logo-light,

html[data-mode="dark"] .fymous-single-post .fymous-branding-logo-light,
body[data-mode="dark"] .fymous-single-post .fymous-branding-logo-light {
    display: none !important;
}


/* Dark mode: show dark logo */

html.dark-mode .fymous-single-post .fymous-branding-logo-dark,
body.dark-mode .fymous-single-post .fymous-branding-logo-dark,

html.darkmode .fymous-single-post .fymous-branding-logo-dark,
body.darkmode .fymous-single-post .fymous-branding-logo-dark,

html.dark .fymous-single-post .fymous-branding-logo-dark,
body.dark .fymous-single-post .fymous-branding-logo-dark,

html.is-dark .fymous-single-post .fymous-branding-logo-dark,
body.is-dark .fymous-single-post .fymous-branding-logo-dark,

html.theme-dark .fymous-single-post .fymous-branding-logo-dark,
body.theme-dark .fymous-single-post .fymous-branding-logo-dark,

html[data-theme="dark"] .fymous-single-post .fymous-branding-logo-dark,
body[data-theme="dark"] .fymous-single-post .fymous-branding-logo-dark,

html[data-mode="dark"] .fymous-single-post .fymous-branding-logo-dark,
body[data-mode="dark"] .fymous-single-post .fymous-branding-logo-dark,

html.fymous-dark-mode .fymous-single-post .fymous-branding-logo-light,
body.fymous-dark-mode .fymous-single-post .fymous-branding-logo-light {
    display: none !important;
}

html.fymous-dark-mode .fymous-single-post .fymous-branding-logo-dark,
body.fymous-dark-mode .fymous-single-post .fymous-branding-logo-dark {
    display: block !important;
}


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

.fymous-branding-line {
    display: block;

    width: 45px;

    height: 2px;

    margin: 0 auto 20px;

    background: #222;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.fymous-branding-text {
    display: block;

    margin: 0;

    padding: 0;

    font-size: 18px;

    line-height: 1.5;

    font-weight: 500;

    letter-spacing: 0.3px;

    color: #444;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .fymous-single-post {
        padding: 115px 22px 0;
    }


    .fymous-title {
        max-width: 850px;

        font-size: 48px !important;

        line-height: 1.1 !important;
    }


    .fymous-featured {
        max-width: 100%;
    }


    .fymous-content {
        max-width: 760px;
    }


    .fymous-branding-inner {
        padding: 60px 22px 55px;
    }


    .fymous-branding-logo {
        width: 330px !important;

        max-width: 80% !important;
    }

}


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

@media (max-width: 767px) {

    .fymous-single-post {
        padding: 105px 17px 0;
    }


    /* CATEGORY */

    .fymous-category {
        margin-bottom: 14px;
    }


    .fymous-category a {
        font-size: 12px;

        letter-spacing: 1.2px;
    }


    /* TITLE */

    .fymous-title {
        max-width: 100%;

        font-size: 34px !important;

        line-height: 1.15 !important;

        letter-spacing: -0.5px;
    }


    /* META */

    .fymous-meta {
        font-size: 13px;

        gap: 7px;

        margin-bottom: 28px;
    }


    /* FEATURED */

    .fymous-featured {
        margin-bottom: 32px;
    }


    .fymous-featured-image {
        border-radius: 8px;
    }


    /* ARTICLE */

    .fymous-content {
        font-size: 17px;

        line-height: 1.75;
    }


    /* HEADINGS */

    .fymous-content h2 {
        margin-top: 38px;

        font-size: 27px;
    }


    .fymous-content h3 {
        margin-top: 30px;

        font-size: 22px;
    }


    /* BLOCKQUOTE */

    .fymous-content blockquote {
        font-size: 19px;

        padding: 16px 18px;
    }


    /* BRANDING */

    .fymous-branding {
        margin-top: 60px;
    }


    .fymous-branding-inner {
        padding: 45px 18px 42px;
    }


    /* LOGO */

    .fymous-branding-logo {
        width: 250px !important;

        max-width: 88% !important;

        height: auto !important;

        margin-bottom: 18px !important;
    }


    /* DIVIDER */

    .fymous-branding-line {
        width: 35px;

        height: 2px;

        margin-bottom: 17px;
    }


    /* TAGLINE */

    .fymous-branding-text {
        font-size: 15px;

        line-height: 1.5;
    }

}


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

@media (max-width: 480px) {

    .fymous-title {
        font-size: 30px !important;
    }


    .fymous-content {
        font-size: 16px;
    }


    .fymous-branding-logo {
        width: 220px !important;

        max-width: 90% !important;
    }


    .fymous-branding-text {
        font-size: 14px;
    }

}
/* =========================================================
   THE FYMOUS - SINGLE POST BRANDING
   CLIENT DEMO SIZE
   ========================================================= */

.fymous-single-post .fymous-branding {
    margin-top: 70px !important;
    padding: 0 !important;
}

.fymous-single-post .fymous-branding-inner {
    padding: 42px 25px 38px !important;
}

.fymous-single-post .fymous-branding-logo {
    width: 250px !important;
    max-width: 70% !important;
    height: auto !important;
    margin: 0 auto 16px !important;
}

.fymous-single-post .fymous-branding-line {
    width: 40px !important;
    height: 2px !important;
    margin: 0 auto 15px !important;
}

.fymous-single-post .fymous-branding-text {
    font-size: 16px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   DARK MODE
   EXACT DARK LOGO
   ========================================================= */

html.fymous-dark-mode .fymous-single-post
.fymous-branding-logo-light,

body.fymous-dark-mode .fymous-single-post
.fymous-branding-logo-light,

html.dark-mode .fymous-single-post
.fymous-branding-logo-light,

body.dark-mode .fymous-single-post
.fymous-branding-logo-light,

html.darkmode .fymous-single-post
.fymous-branding-logo-light,

body.darkmode .fymous-single-post
.fymous-branding-logo-light,

html.dark .fymous-single-post
.fymous-branding-logo-light,

body.dark .fymous-single-post
.fymous-branding-logo-light {
    display: none !important;
}


html.fymous-dark-mode .fymous-single-post
.fymous-branding-logo-dark,

body.fymous-dark-mode .fymous-single-post
.fymous-branding-logo-dark,

html.dark-mode .fymous-single-post
.fymous-branding-logo-dark,

body.dark-mode .fymous-single-post
.fymous-branding-logo-dark,

html.darkmode .fymous-single-post
.fymous-branding-logo-dark,

body.darkmode .fymous-single-post
.fymous-branding-logo-dark,

html.dark .fymous-single-post
.fymous-branding-logo-dark,

body.dark .fymous-single-post
.fymous-branding-logo-dark {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   DARK MODE BRANDING BACKGROUND
   ========================================================= */

html.fymous-dark-mode .fymous-single-post .fymous-branding,
body.fymous-dark-mode .fymous-single-post .fymous-branding,
html.dark-mode .fymous-single-post .fymous-branding,
body.dark-mode .fymous-single-post .fymous-branding,
html.dark .fymous-single-post .fymous-branding,
body.dark .fymous-single-post .fymous-branding {
    background: #17171c !important;
    border-top-color: rgba(255,255,255,0.12) !important;
}


html.fymous-dark-mode .fymous-single-post
.fymous-branding-text,

body.fymous-dark-mode .fymous-single-post
.fymous-branding-text,

html.dark-mode .fymous-single-post
.fymous-branding-text,

body.dark-mode .fymous-single-post
.fymous-branding-text,

html.dark .fymous-single-post
.fymous-branding-text,

body.dark .fymous-single-post
.fymous-branding-text {
    color: #d6d6dc !important;
}


html.fymous-dark-mode .fymous-single-post
.fymous-branding-line,

body.fymous-dark-mode .fymous-single-post
.fymous-branding-line,

html.dark-mode .fymous-single-post
.fymous-branding-line,

body.dark-mode .fymous-single-post
.fymous-branding-line,

html.dark .fymous-single-post
.fymous-branding-line,

body.dark .fymous-single-post
.fymous-branding-line {
    background: #ffffff !important;
}


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

@media (max-width: 767px) {

    .fymous-single-post .fymous-branding {
        margin-top: 50px !important;
    }

    .fymous-single-post .fymous-branding-inner {
        padding: 35px 18px 32px !important;
    }

    .fymous-single-post .fymous-branding-logo {
        width: 210px !important;
        max-width: 78% !important;
        margin-bottom: 14px !important;
    }

    .fymous-single-post .fymous-branding-line {
        width: 35px !important;
        margin-bottom: 13px !important;
    }

    .fymous-single-post .fymous-branding-text {
        font-size: 14px !important;
    }

}/* End custom CSS */