/*!
 * Favthon Enterprise Theme
 * Theme Stylesheet
 * Version: 1.0.0
 * Author: Favthon Technologies
 */

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {
    --primary: #1A50A0;
    --primary-dark: #0F3E82;
    --secondary: #0B2E63;
    --accent: #FFB000;

    --success: #198754;
    --danger: #DC3545;
    --warning: #FFC107;
    --info: #0DCAF0;

    --white: #ffffff;
    --light: #F8F9FA;
    --gray: #6C757D;
    --dark: #212529;

    --body-bg: #ffffff;
    --body-color: #333333;
    --border-color: #E5E7EB;

    --font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --transition: .3s ease;
    --radius: 6px;

    --header-height: 90px;
}

/* ==========================================================
   GLOBAL
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--body-color);
    background: var(--body-bg);
    line-height: 1.7;
}

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

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent);
}

section {
    position: relative;
}

/* ==========================================================
   HEADER
========================================================== */

.site-header {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: .3s;
}

.site-header.is-sticky {
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.site-branding img {
    max-height: 70px;
    width: auto;
}

.site-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.site-description {
    color: var(--gray);
    margin-top: .3rem;
}

/* ==========================================================
   NAVIGATION
========================================================== */

.navbar-nav .nav-link {
    color: var(--secondary);
    font-weight: 600;
    padding: .8rem 1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .current-menu-item>.nav-link,
.navbar-nav .current_page_item>.nav-link {
    color: var(--primary);
}

.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ==========================================================
   HERO
========================================================== */

.hero {
    padding: 100px 0;
}

.hero h1 {
    color: var(--secondary);
}

.hero .btn {
    margin-top: 15px;
}

/* ==========================================================
   CARDS
========================================================== */

.card {
    border: none;
    border-radius: var(--radius);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

/* ==========================================================
   POSTS
========================================================== */

.entry-title a {
    color: var(--secondary);
}

.entry-title a:hover {
    color: var(--primary);
}

.entry-meta {
    font-size: .9rem;
    color: var(--gray);
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* ==========================================================
   SIDEBAR
========================================================== */

.widget {
    background: #fff;
    padding: 25px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.widget-title {
    margin-bottom: 20px;
    color: var(--secondary);
}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
    background: var(--secondary);
    color: #fff;
    padding: 70px 0 30px;
}

.site-footer h5 {
    color: #fff;
}

.site-footer a {
    color: rgba(255,255,255,.85);
}

.site-footer a:hover {
    color: var(--accent);
}

.footer-copy {
    margin: 0;
}

/* ==========================================================
   SEARCH FORM
========================================================== */

.search-form .form-control {
    border-radius: var(--radius) 0 0 var(--radius);
}

.search-form .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ==========================================================
   COMMENTS
========================================================== */

.comment-list li {
    margin-bottom: 30px;
}

.comment-body {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: var(--radius);
}

/* ==========================================================
   BACK TO TOP
========================================================== */

#back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 9999;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background: var(--primary-dark);
}

/* ==========================================================
   FADE ANIMATION
========================================================== */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: .7s ease;
    transition-delay: var(--favthon-reveal-delay, 0ms);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================
   WORDPRESS
========================================================== */

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}

.aligncenter {
    display: block;
    margin: 0 auto 20px;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    color: var(--gray);
    margin-top: 10px;
}

.gallery-caption {
    font-size: .9rem;
}

.bypostauthor {
    display: block;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .hero {
        padding: 70px 0;
        text-align: center;
    }

    .site-title {
        font-size: 1.5rem;
    }

    .navbar-nav {
        padding-top: 15px;
    }

}

@media (max-width: 768px) {

    .hero h1 {
        font-size: 2rem;
    }

    .site-footer {
        text-align: center;
    }

    .footer-copy {
        margin-bottom: 20px;
    }

}

@media (max-width: 576px) {

    .hero {
        padding: 50px 0;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

}
/* ==========================================================
   FAVTHON HERO SECTION
========================================================== */

.favthon-hero {
    position: relative;
    min-height: 680px;
    background-image: url('../images/hero-placeholder.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.favthon-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(5, 18, 48, 0.82) 0%,
        rgba(8, 26, 62, 0.60) 38%,
        rgba(10, 32, 75, 0.20) 60%,
        transparent 100%
    );
}

.favthon-hero__inner {
    position: relative;
    z-index: 2;
}

.favthon-hero__content {
    max-width: 620px;
}

.favthon-hero__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    color: #E53935;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 1rem;
}

.favthon-hero__title {
    color: #FFFFFF;
    font-weight: 800;
    line-height: 1.05;
    font-size: 72px;
    margin-bottom: 1.25rem;
}

.favthon-hero__title .favthon-hero__highlight {
    color: #FFC107;
}

.favthon-hero__text {
    color: #FFFFFF;
    max-width: 560px;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.favthon-hero__buttons {
    display: flex;
    gap: 1rem;
}

.favthon-hero__btn-primary {
    background-color: #E53935;
    border-color: #E53935;
    color: #FFFFFF;
    font-weight: 600;
}

.favthon-hero__btn-primary:hover,
.favthon-hero__btn-primary:focus {
    background-color: #C62828;
    border-color: #C62828;
    color: #FFFFFF;
}

.favthon-hero__btn-secondary {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-weight: 600;
}

.favthon-hero__btn-secondary:hover,
.favthon-hero__btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.favthon-hero__btn-primary:focus-visible,
.favthon-hero__btn-secondary:focus-visible {
    outline: 3px solid #FFC107;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .favthon-hero {
        min-height: 560px;
    }
    .favthon-hero__title {
        font-size: 56px;
    }
}

@media (max-width: 767.98px) {
    .favthon-hero {
        min-height: 500px;
    }
    .favthon-hero__title {
        font-size: 42px;
    }
    .favthon-hero__content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .favthon-hero__text {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .favthon-hero__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    .favthon-hero__buttons .btn {
        width: auto;
        flex: 0 1 auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-size: 0.9rem;
    }
    .favthon-hero .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ==========================================================
   FAVTHON HEADER
========================================================== */

.favthon-header {
    position: relative;
    z-index: 100;
}

/* ---- Top bar ---- */

.favthon-topbar {
    background-color: var(--secondary);
    color: var(--white);
    font-size: 13px;
}

.favthon-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 8px 0;
}

.favthon-topbar__contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.favthon-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-decoration: none;
    opacity: 0.9;
}

.favthon-topbar__item:hover {
    opacity: 1;
    color: var(--white);
}

.favthon-topbar__item i {
    font-size: 13px;
}

.favthon-topbar__right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.favthon-topbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.favthon-topbar__social a {
    color: var(--white);
    opacity: 0.9;
    font-size: 14px;
}

.favthon-topbar__social a:hover {
    opacity: 1;
}

.favthon-topbar__lang-toggle {
    background: transparent;
    border: none;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 0;
}

.favthon-topbar__lang-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Main nav bar ---- */

.favthon-mainbar {
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.favthon-mainbar__nav {
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.favthon-mainbar .custom-logo {
    max-height: 52px;
    width: auto;
}

.favthon-logo-fallback {
    font-weight: 800;
    font-size: 20px;
    color: var(--primary);
    text-decoration: none;
}

.favthon-mainbar .navbar-nav {
    align-items: center;
    gap: 4px;
}

.favthon-mainbar .nav-link {
    color: var(--dark);
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    font-size: 0.95rem;
}

.favthon-mainbar .nav-item.favthon-nav-active > .nav-link,
.favthon-mainbar .nav-link:hover,
.favthon-mainbar .nav-link:focus {
    color: #E53935;
}

.favthon-mainbar .dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius);
    padding: 8px;
}

.favthon-mainbar .dropdown-item {
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 500;
}

.favthon-mainbar .dropdown-item:hover,
.favthon-mainbar .dropdown-item:focus {
    background-color: var(--light);
    color: var(--accent);
}

.favthon-mainbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.favthon-search-toggle {
    background: transparent;
    border: none;
    color: var(--dark);
    font-size: 18px;
}

.favthon-search-toggle:focus-visible,
.favthon-mainbar__cta:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.favthon-mainbar__cta {
    background-color: #E53935;
    color: var(--white);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.5rem 1.25rem;
}

.favthon-mainbar__cta:hover,
.favthon-mainbar__cta:focus {
    background-color: #C62828;
    color: var(--white);
}

.favthon-search-form-wrap {
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.favthon-search-form-wrap .search-form,
.favthon-search-form-wrap .input-group {
    max-width: 420px;
    width: 100%;
}

@media (max-width: 575.98px) {
    .favthon-search-form-wrap {
        justify-content: stretch;
    }

    .favthon-search-form-wrap .search-form,
    .favthon-search-form-wrap .input-group {
        max-width: 100%;
    }
}

/* ---- Mobile bar: lang + hamburger ---- */

.favthon-mobile-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.favthon-mobile-bar__lang-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 14px;
    color: var(--dark);
    cursor: pointer;
}

.favthon-mobile-bar__lang-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.favthon-mobile-bar__lang-btn i {
    font-size: 10px;
}

@media (max-width: 991.98px) {

    .favthon-topbar {
        display: none;
    }

    .favthon-mainbar__nav {
        flex-wrap: wrap;
        row-gap: 0;
        justify-content: flex-start;
    }

    .site-branding {
        margin-right: auto;
    }

    .collapse.navbar-collapse {
        flex-basis: 100%;
        margin-top: 4px;
    }

    .favthon-mainbar .navbar-nav {
        align-items: flex-start;
        text-align: left;
        gap: 0;
        margin-top: 0;
    }

    .favthon-mainbar .nav-link {
        width: 100%;
        padding: 0.6rem 0;
        text-align: left;
    }

    .favthon-mainbar__actions {
        display: none;
    }
}

@media (max-width: 767.98px) {

    .favthon-topbar__address {
        display: none;
    }

    .favthon-topbar__inner {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================
   FAVTHON FOOTER (4-column layout)
========================================================== */

.favthon-footer__heading {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.favthon-footer__about-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    line-height: 1.7;
}

.favthon-footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
}

.favthon-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
}

.favthon-footer__social a:hover {
    background: var(--accent);
    color: var(--secondary);
}

/* Quick menu with dashed dividers between items */
.favthon-footer__quicklinks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.favthon-footer__quicklinks li {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}

.favthon-footer__quicklinks li:first-child {
    padding-top: 0;
}

.favthon-footer__quicklinks li:last-child {
    border-bottom: none;
}

.favthon-footer__quicklinks a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.favthon-footer__quicklinks a:hover {
    color: var(--accent);
}

.favthon-footer__contact-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
}

.favthon-footer__contact-line i {
    margin-top: 3px;
    color: var(--accent);
}

.favthon-footer__contact-line i.bi-whatsapp {
    color: #25D366;
}

.favthon-footer__contact-line a {
    color: rgba(255, 255, 255, 0.85);
}

.favthon-footer__contact-line a:hover {
    color: var(--accent);
}

/* Site statistics, with dashed dividers */
.favthon-footer__stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.favthon-footer__stats li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    font-size: 0.9rem;
}

.favthon-footer__stats li:first-child {
    padding-top: 0;
}

.favthon-footer__stats li:last-child {
    border-bottom: none;
}

.favthon-footer__stats-label {
    color: rgba(255, 255, 255, 0.75);
}

.favthon-footer__stats-value {
    font-weight: 700;
    color: var(--accent);
}

.favthon-footer__credit {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.favthon-footer__credit a {
    color: var(--accent);
    font-weight: 600;
}

.favthon-footer__credit a:hover {
    color: #fff;
}

/* ==========================================================
   FAVTHON INTRO (About + Image + Services strip)
========================================================== */

.favthon-intro {
    padding: 80px 0;
    background-color: #F5F7FA;
}

/* ---- Left: About column ---- */

.favthon-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.favthon-intro__eyebrow-line {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: var(--accent);
}

/* Shared modifier: centers the eyebrow + line (used on Gallery, Services, and any other centered intro block). */
.favthon-intro__eyebrow--center {
    justify-content: center;
}

.favthon-intro__heading {
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1.2;
    color: var(--secondary);
    margin-bottom: 1.1rem;
}

.favthon-intro__text {
    color: var(--gray);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.favthon-intro__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.favthon-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--secondary);
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius);
    border: none;
}

.favthon-intro__btn:hover,
.favthon-intro__btn:focus {
    background-color: var(--primary);
    color: var(--white);
}

.favthon-intro__btn--profile {
    background-color: #E53935;
}

.favthon-intro__btn--profile:hover,
.favthon-intro__btn--profile:focus {
    background-color: #C62828;
    color: var(--white);
}

.favthon-intro__btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Centre: Image ---- */

.favthon-intro__image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.favthon-intro__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 320px;
}

.favthon-intro__image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
}

.favthon-intro__image-placeholder i {
    font-size: 48px;
    opacity: 0.6;
}

/* ---- Right: Services list ---- */

.favthon-intro__services-eyebrow {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.favthon-intro__services-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.favthon-intro__services-list li {
    border-bottom: 1px solid var(--border-color);
}

.favthon-intro__services-list li:last-child {
    border-bottom: none;
}

.favthon-intro__services-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    color: var(--dark);
    text-decoration: none;
    transition: var(--transition);
}

.favthon-intro__services-list a:hover {
    color: var(--primary);
    padding-left: 8px;
}

.favthon-intro__svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(26, 80, 160, 0.08);
    color: var(--primary);
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--transition);
}

.favthon-intro__services-list a:hover .favthon-intro__svc-icon {
    background-color: var(--primary);
    color: var(--white);
}

.favthon-intro__svc-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
}

.favthon-intro__svc-arrow {
    color: var(--gray);
    font-size: 14px;
    transition: var(--transition);
}

.favthon-intro__services-list a:hover .favthon-intro__svc-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

/* ---- Intro responsive ---- */

@media (max-width: 991.98px) {
    .favthon-intro {
        padding: 60px 0;
    }
    .favthon-intro__heading {
        font-size: 1.6rem;
    }
    .favthon-intro__image img {
        min-height: 260px;
    }
}

@media (max-width: 767.98px) {
    .favthon-intro {
        padding: 48px 0;
    }
    .favthon-intro__about {
        text-align: center;
    }
    .favthon-intro__eyebrow {
        justify-content: center;
    }
    .favthon-intro__heading {
        font-size: 1.45rem;
    }
    .favthon-intro__image {
        margin: 0.5rem 0;
    }
    .favthon-intro__buttons {
        justify-content: center;
    }
}


/* Favthon Enterprise v1.5.3 */
.favthon-intro{padding:90px 0}
.favthon-intro__image{
border-radius:14px;overflow:hidden;
box-shadow:0 16px 40px rgba(0,0,0,.12)}
.favthon-intro__image img{
width:100%;height:100%;object-fit:cover;
min-height:340px;display:block;border-radius:0}

@media(max-width:767.98px){
.favthon-intro__btn{
width:auto;display:inline-flex;padding:0.6rem 1.4rem;font-size:0.88rem}
}

@media(max-width:420px){
.favthon-intro__btn{
padding:0.55rem 1.1rem;font-size:0.82rem}
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| Page Hero Banner
|--------------------------------------------------------------------------
|
| Reusable page-title banner for all inner pages (pages, single posts,
| archives, search results, 404). Rendered by
| template-parts/page-header.php. Never loaded on the homepage —
| front-page.php keeps its own dedicated .favthon-hero section.
*/

.favthon-page-header {
    position: relative;
    height: 340px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--secondary);
    margin: 0;
}

.site-main,
#primary {
    margin: 0;
    padding: 0;
}

.favthon-header + main > .favthon-page-header:first-child {
    margin-top: 0;
}

.favthon-page-header__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    animation: favthonBannerFadeIn 0.6s ease both;
}

.favthon-page-header__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.favthon-page-header__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(11, 46, 99, 0.82),
        rgba(26, 80, 160, 0.55)
    );
}

.favthon-page-header__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    animation: favthonTitleFadeUp 0.6s ease 0.15s both;
}

.favthon-page-header__title {
    color: var(--white);
    font-weight: 700;
    font-size: 52px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

/* ---- Breadcrumb ---- */

.favthon-breadcrumb {
    display: flex;
    justify-content: center;
}

.favthon-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.favthon-breadcrumb li {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
}

.favthon-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.favthon-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: var(--transition);
}

.favthon-breadcrumb a:hover {
    color: var(--white);
    text-decoration: underline;
}

.favthon-breadcrumb a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.favthon-breadcrumb__current {
    color: var(--white);
    font-weight: 600;
}

/* ---- Animations ---- */

@keyframes favthonBannerFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes favthonTitleFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .favthon-page-header__bg,
    .favthon-page-header__inner {
        animation: none;
    }
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
    .favthon-page-header {
        height: 280px;
    }
    .favthon-page-header__title {
        font-size: 42px;
    }
}

@media (max-width: 767.98px) {
    .favthon-page-header {
        height: 220px;
    }
    .favthon-page-header__title {
        font-size: 32px;
        letter-spacing: 0.5px;
    }
    .favthon-breadcrumb ol {
        font-size: 0.8rem;
    }
    .favthon-breadcrumb li:not(:last-child)::after {
        margin: 0 0.35rem;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| Our Clients — logo grid section
|--------------------------------------------------------------------------
|
| Homepage "trusted by" section. Each logo sits in its own bordered card,
| matching the layout of the client-supplied reference mockup: uniform
| square tiles, evenly spaced, logo centered and fully visible.
*/

.favthon-section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 0.75rem;
}

.favthon-clients {
    background-color: #EDEEF1;
}

.favthon-clients-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.favthon-client-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 24px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: var(--transition);
}

.favthon-client-card:hover,
.favthon-client-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(26, 80, 160, 0.14);
    transform: translateY(-3px);
}

.favthon-client-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .favthon-clients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .favthon-clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .favthon-client-card {
        padding: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| What Make Us Unique — image + colour timeline
|--------------------------------------------------------------------------
|
| Homepage section: portrait image on the left, a vertical dotted
| timeline of coloured highlight bars on the right. Mirrors the
| client-supplied "What make us Unique" company-profile page design.
*/

.favthon-unique__image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.favthon-unique__image img {
    display: block;
    width: 100%;
    height: auto;
}

.favthon-unique__heading {
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1.2;
    color: var(--secondary);
    margin-bottom: 1.75rem;
}

.favthon-unique__timeline {
    position: relative;
    padding-left: 36px;
}

.favthon-unique__timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    bottom: 10px;
    border-left: 2px dashed rgba(15, 23, 42, 0.25);
}

.favthon-unique__item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.favthon-unique__item:last-child {
    margin-bottom: 0;
}

.favthon-unique__dot {
    position: absolute;
    left: -36px;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateY(-50%);
    background-color: var(--favthon-unique-color, var(--primary));
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--favthon-unique-color, var(--primary));
    z-index: 2;
}

.favthon-unique__bar {
    flex: 1;
    background-color: var(--favthon-unique-color, var(--light));
    color: var(--favthon-unique-text, var(--dark));
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 16px 22px;
    border-radius: 4px;
}

.favthon-unique__item--1 {
    --favthon-unique-color: #8ECAE6;
    --favthon-unique-text: #0B2E63;
}

.favthon-unique__item--2 {
    --favthon-unique-color: #A9D977;
    --favthon-unique-text: #1F3D0C;
}

.favthon-unique__item--3 {
    --favthon-unique-color: #2E2E2E;
    --favthon-unique-text: #FFFFFF;
}

.favthon-unique__item--4 {
    --favthon-unique-color: #F5E94B;
    --favthon-unique-text: #4A3F00;
}

.favthon-unique__item--5 {
    --favthon-unique-color: #EC1E82;
    --favthon-unique-text: #FFFFFF;
}

.favthon-unique__item--6 {
    --favthon-unique-color: #29ABE2;
    --favthon-unique-text: #06283D;
}

@media (max-width: 767.98px) {
    .favthon-unique__heading {
        font-size: 1.55rem;
    }
    .favthon-unique__bar {
        font-size: 0.88rem;
        padding: 13px 16px;
    }
    .favthon-unique__timeline {
        padding-left: 30px;
    }
    .favthon-unique__dot {
        left: -30px;
        width: 16px;
        height: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| What We Do — full-width background section with card grid
|--------------------------------------------------------------------------
|
| Homepage section: full-bleed graphic-design-themed SVG background with
| a brand-gradient overlay, and a 3-column grid of service cards (icon,
| title, description, coloured accent bar, "Read More" link to
| /services). Cards use --favthon-wwd-color as a shared accent variable
| per numbered modifier so icon, title and accent bar stay in sync.
*/

.favthon-whatwedo {
    position: relative;
    overflow: hidden;
    padding-top: 90px;
    padding-bottom: 90px;
}

.favthon-whatwedo__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.favthon-whatwedo__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.favthon-whatwedo__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(11, 46, 99, 0.90) 0%,
        rgba(15, 62, 130, 0.86) 55%,
        rgba(26, 80, 160, 0.82) 100%
    );
}

.favthon-whatwedo__inner {
    position: relative;
    z-index: 2;
}

.favthon-section-eyebrow--light {
    color: var(--accent);
}

.favthon-whatwedo__heading {
    color: var(--white);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}

.favthon-whatwedo__sub {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1rem;
}

.favthon-whatwedo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.favthon-whatwedo__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 16px;
    padding: 34px 28px 28px;
    box-shadow: 0 18px 40px rgba(6, 20, 46, 0.22);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.favthon-whatwedo__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background-color: var(--favthon-wwd-color, var(--primary));
    border-radius: 0 0 16px 16px;
}

.favthon-whatwedo__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 55px rgba(6, 20, 46, 0.30);
}

.favthon-whatwedo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background-color: var(--light);
    background-color: color-mix(in srgb, var(--favthon-wwd-color, var(--primary)) 14%, white);
    color: var(--favthon-wwd-color, var(--primary));
    font-size: 28px;
    margin-bottom: 18px;
    transition: transform 0.35s ease;
}

.favthon-whatwedo__card:hover .favthon-whatwedo__icon {
    transform: scale(1.1) rotate(-4deg);
}

.favthon-whatwedo__card-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--favthon-wwd-color, var(--secondary));
    margin-bottom: 0.65rem;
}

.favthon-whatwedo__card-text {
    color: var(--gray);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 1.1rem;
    flex: 1;
}

.favthon-whatwedo__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--favthon-wwd-color, var(--primary));
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    align-self: flex-start;
    transition: var(--transition);
}

.favthon-whatwedo__link:hover {
    gap: 8px;
    color: var(--favthon-wwd-color, var(--primary));
}

.favthon-whatwedo__card--1 { --favthon-wwd-color: #3D3D3D; }
.favthon-whatwedo__card--2 { --favthon-wwd-color: #E53935; }
.favthon-whatwedo__card--3 { --favthon-wwd-color: #F5A623; }
.favthon-whatwedo__card--4 { --favthon-wwd-color: #2F80ED; }
.favthon-whatwedo__card--5 { --favthon-wwd-color: #E91E8C; }
.favthon-whatwedo__card--6 { --favthon-wwd-color: #2A2560; }
.favthon-whatwedo__card--7 { --favthon-wwd-color: #7CB342; }
.favthon-whatwedo__card--8 { --favthon-wwd-color: #8E24AA; }
.favthon-whatwedo__card--9 { --favthon-wwd-color: #1B5E20; }

@media (max-width: 991.98px) {
    .favthon-whatwedo {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .favthon-whatwedo__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .favthon-whatwedo__heading {
        font-size: 1.65rem;
    }
}

@media (max-width: 575.98px) {
    .favthon-whatwedo__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .favthon-whatwedo__card {
        padding: 28px 22px 22px;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| CTA buttons — horizontal, compact on mobile
|--------------------------------------------------------------------------
*/

.favthon-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.favthon-cta__btn-primary,
.favthon-cta__btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    border-radius: var(--radius);
    border: none;
}

.favthon-cta__btn-primary {
    background-color: #E53935;
    color: var(--white);
}

.favthon-cta__btn-primary:hover,
.favthon-cta__btn-primary:focus {
    background-color: #C62828;
    color: var(--white);
}

.favthon-cta__btn-whatsapp {
    background-color: #25D366;
    color: var(--white);
}

.favthon-cta__btn-whatsapp:hover,
.favthon-cta__btn-whatsapp:focus {
    background-color: #1DA851;
    color: var(--white);
}

@media (max-width: 575.98px) {
    .favthon-cta__buttons {
        flex-wrap: nowrap;
        gap: 0.6rem;
    }
    .favthon-cta__btn-primary,
    .favthon-cta__btn-whatsapp {
        flex: 1 1 0;
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| Floating features strip — background matched to About section
|--------------------------------------------------------------------------
|
| The floating "Premium Quality / Fast Turnaround / Expert Team /
| 24/7 Support" card sits directly above the About (.favthon-intro)
| section, so its background is aligned to the same tone (#F5F7FA)
| instead of white for a seamless visual transition.
*/

.hero-features {
    background-color: #F5F7FA;
}

.favthon-footer {
    position: relative;
}

.favthon-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--accent);
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| Footer — left-align content on mobile
|--------------------------------------------------------------------------
|
| All footer columns (About, Quick Menu, Contact, Stats) and the bottom
| "Designed by" credit line stay left-aligned on small screens, matching
| the desktop layout instead of centering when columns stack.
*/

@media (max-width: 767.98px) {

    .favthon-footer .favthon-footer__heading,
    .favthon-footer .favthon-footer__about-text,
    .favthon-footer .favthon-footer__quicklinks,
    .favthon-footer .favthon-footer__quicklinks li,
    .favthon-footer .favthon-footer__contact-line,
    .favthon-footer .favthon-footer__stats {
        text-align: left;
    }

    .favthon-footer .favthon-footer__social {
        justify-content: flex-start;
    }

    .favthon-footer .footer-copy,
    .favthon-footer .favthon-footer__credit {
        text-align: left !important;
    }

}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| Contact Page
|--------------------------------------------------------------------------
|
| Info cards (Call/WhatsApp, Visit Us, Email Us, Business Hours), the
| enquiry form (clean underline-input style) and the "Get in Touch"
| sidebar. Colours use the site's brand palette (--primary / --accent)
| rather than the purple reference mockup this was adapted from.
*/

/* ---- Info cards row ---- */

.favthon-contact-cards {
    padding: 70px 0 20px;
}

.favthon-contact-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.favthon-contact-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 30px 26px;
    text-align: center;
    transition: var(--transition);
}

.favthon-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(6, 20, 46, 0.12);
    border-color: transparent;
}

.favthon-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: rgba(26, 80, 160, 0.08);
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 16px;
}

.favthon-contact-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
}

.favthon-contact-card__main {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.favthon-contact-card__main a {
    color: var(--dark);
}

.favthon-contact-card__main a:hover {
    color: var(--primary);
}

.favthon-contact-card__sub {
    color: var(--gray);
    font-size: 0.85rem;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .favthon-contact-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .favthon-contact-cards {
        padding: 50px 0 10px;
    }
    .favthon-contact-cards__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---- Form column ---- */

.favthon-contact__heading {
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.favthon-contact__sub {
    color: var(--gray);
    margin-bottom: 2rem;
}

.favthon-form-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    margin-bottom: 1.75rem;
}

.favthon-form-notice--success {
    background-color: rgba(34, 197, 94, 0.10);
    color: #15803D;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.favthon-form-notice--error {
    background-color: rgba(229, 57, 53, 0.08);
    color: #B91C1C;
    border: 1px solid rgba(229, 57, 53, 0.3);
}

.favthon-form-notice i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Honeypot — hidden from real visitors and excluded from the tab order.
   display:none is the most reliable way to keep browser autofill from
   ever populating it (off-screen positioning alone can still attract
   autofill in some browsers). */
.favthon-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: none;
}

.favthon-form-field {
    position: relative;
    margin-bottom: 1.6rem;
}

.favthon-form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 6px;
}

.favthon-form-field .req {
    color: #E53935;
}

.favthon-form-field input,
.favthon-form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--border-color);
    background: transparent;
    padding: 10px 2px;
    font-size: 1rem;
    color: var(--dark);
    font-family: inherit;
    transition: var(--transition);
    resize: vertical;
}

.favthon-form-field input:focus,
.favthon-form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.favthon-form-field.has-error input,
.favthon-form-field.has-error textarea {
    border-bottom-color: #E53935;
}

.favthon-form-field input:user-invalid,
.favthon-form-field textarea:user-invalid {
    border-bottom-color: #E53935;
}

.favthon-form-field textarea {
    min-height: 130px;
}

.favthon-contact-form__submit {
    display: inline-flex;
    align-items: center;
    background-color: #E53935;
    color: var(--white);
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: var(--radius);
    border: none;
    font-size: 1rem;
}

.favthon-contact-form__submit:hover,
.favthon-contact-form__submit:focus {
    background-color: #C62828;
    color: var(--white);
}

.favthon-contact-form__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---- Sidebar column ---- */

.favthon-contact-sidebar {
    background-color: #F5F7FA;
    border-radius: 16px;
    padding: 36px 32px;
    height: 100%;
}

.favthon-contact-sidebar__heading {
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--secondary);
    margin-bottom: 1.4rem;
}

.favthon-contact-sidebar__heading--social {
    margin-top: 2rem;
}

.favthon-contact-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.favthon-contact-sidebar__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 1.3rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px dashed var(--border-color);
}

.favthon-contact-sidebar__list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.favthon-contact-sidebar__list i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(26, 80, 160, 0.08);
    color: var(--primary);
    font-size: 16px;
}

.favthon-contact-sidebar__list strong {
    display: block;
    color: var(--secondary);
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.favthon-contact-sidebar__list span,
.favthon-contact-sidebar__list span a {
    color: var(--gray);
    font-size: 0.92rem;
}

.favthon-contact-sidebar__list span a:hover {
    color: var(--primary);
}

.favthon-contact-sidebar__social {
    display: flex;
    gap: 10px;
}

.favthon-contact-sidebar__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    color: var(--secondary);
    font-size: 16px;
}

.favthon-contact-sidebar__social a:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

@media (max-width: 767.98px) {
    .favthon-contact__heading {
        font-size: 1.5rem;
    }
    .favthon-contact-sidebar {
        padding: 28px 24px;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| About Page — "Who We Are" section
|--------------------------------------------------------------------------
|
| Text column with a red eyebrow + paragraphs on one side, and an
| organic "blob" shaped image frame (CSS border-radius trick, no SVG
| mask needed) on the other, matching the reference design supplied.
*/

.favthon-who {
    padding: 90px 0;
}

.favthon-who__text {
    color: var(--dark);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 1.25rem;
}

.favthon-who__text:last-child {
    margin-bottom: 0;
}

.favthon-who__blob {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    box-shadow: 0 24px 55px rgba(6, 20, 46, 0.18);
}

.favthon-who__blob img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

@media (max-width: 767.98px) {
    .favthon-who {
        padding: 60px 0;
    }
    .favthon-who__blob {
        max-width: 340px;
    }
}

/*
|--------------------------------------------------------------------------
| Favthon Enterprise
| About Page — Stats / Vision / Mission section
|--------------------------------------------------------------------------
|
| Left: intro paragraph + a 2-column grid of labelled progress bars.
| Middle & right: matching "ring icon" cards for Vision (green) and
| Mission (red), equal height to each other via Bootstrap's flex-row
| stretch behaviour (the stats column may naturally run taller).
*/

.favthon-vm__stats-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 34px 30px;
    box-shadow: 0 12px 32px rgba(6, 20, 46, 0.08);
}

.favthon-vm__intro {
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.favthon-vm__stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 20px;
}

.favthon-vm__stat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--secondary);
    margin-bottom: 8px;
}

.favthon-vm__stat-head span:last-child {
    color: var(--gray);
    font-weight: 600;
    text-transform: none;
}

.favthon-vm__stat-bar {
    width: 100%;
    height: 8px;
    background-color: #E9EEF3;
    border-radius: 20px;
    overflow: hidden;
}

.favthon-vm__stat-fill {
    height: 100%;
    background-color: #8BC34A;
    border-radius: 20px;
}

.favthon-vm__card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(6, 20, 46, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.favthon-vm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 34px;
    margin-bottom: 1.5rem;
}

.favthon-vm__card h3 {
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.9rem;
}

.favthon-vm__card p {
    color: var(--gray);
    font-size: 0.94rem;
    line-height: 1.75;
    margin-bottom: 0;
}

.favthon-vm__card--vision {
    color: #6FBE44;
}

.favthon-vm__card--vision h3 {
    color: #6FBE44;
}

.favthon-vm__card--mission {
    color: #E53935;
}

.favthon-vm__card--mission h3 {
    color: #E53935;
}

@media (max-width: 575.98px) {
    .favthon-vm__stats-grid {
        grid-template-columns: 1fr;
    }
    .favthon-vm__stats-card,
    .favthon-vm__card {
        padding: 26px 22px;
    }
}