/* ===================================================================================

Theme Name: Bexon Child
Theme URI: https://bexon.themejunction.net/
Author: Theme Junction
Author URI: https://themeforest.net/user/theme-junction/portfolio
Description: Bexon is a Corporate Business  WordPress Theme.
Version: 1.0.0
Template: bexon
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

We encourage you to create Child theme for any modifications you will want to do.

Why use Child theme?

Because of future updates we may provide for this theme that will overwrite your
modifications and all your custom work.

If you are not familiar with Child Themes, you can read about it here:
http://codex.wordpress.org/Child_Themes
http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

.sec-heading .sec-title span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 20px;
    transform: rotate(-1.36deg) translate(2px, -4px);
}

.sec-heading .sec-title span::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 88%;
    background-color: var(--tj-color-theme-primary);
    border-radius: 80px;
    transform: translate(-50%, -50%);
}

.mainmenu ul > li > a {
    font-weight: 400;
}

.text-right {
    text-align: right;
}

.contact-form.style-3 .form-input textarea, 
.contact-form.style-3 .form-input input[type="tel"], 
.contact-form.style-3 .form-input input[type="text"], 
.contact-form.style-3 .form-input input[type="email"],
.contact-form.style-3 .form-input .nice-select {
    background-color: #fff;
}

.sec-heading .sub-title {
    border-radius: 30px;
}

/* ===== TJ Testimonial - Style 10 (custom, Ofi Invest) =====
   No background color here on purpose: the section/container background
   (e.g. the green from the reference design) is applied by the admin
   directly on the Elementor section, not baked into this widget. */

.h11-testimonial-wrapper {
    position: relative;
}
.h11-testimonial-wrapper  .tes-title {
    font-size: 42px;
}
.h11-testimonial-wrapper  .tes-title strong{
    font-weight: 600;
}

.h11-testimonial-wrapper .swiper-pagination-area .swiper-pagination-bullet {
    background-color: #073D29;
}

.h11-testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 60px;
}

.h11-testimonial-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.h11-testimonial-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    background-color: var(--tj-color-theme-dark);
    color: var(--tj-color-common-white);
    font-size: 12px;
    font-weight: var(--tj-fw-sbold, 600);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 30px;
}

.h11-testimonial-top .tes-title {
    margin: 0;
    font-weight: var(--tj-fw-sbold, 600);
}

.h11-testimonial-wrapper .testimonial-navigation {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.h11-testimonial-wrapper .slider-prev,
.h11-testimonial-wrapper .slider-next {
    width: 44px;
    height: 44px;
    background-color: var(--tj-color-theme-dark);
    border-color: var(--tj-color-theme-dark);
}

.h11-testimonial-wrapper .slider-prev .anim-icon i,
.h11-testimonial-wrapper .slider-next .anim-icon i {
    position: static;
    transform: none;
    color: var(--tj-color-common-white);
}

.h11-testimonial-wrapper .slider-prev:hover,
.h11-testimonial-wrapper .slider-next:hover {
    background-color: var(--tj-color-theme-primary);
    border-color: var(--tj-color-theme-primary);
}

.h11-testimonial-slider .testimonial-item {
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 0;
    background-color: transparent;
}
.h11-testimonial-slider .testimonial-item .desc{
    padding-top: 0;
}

.h11-testi-content {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #E1FAF1;
    border-radius: 10px;
    padding: 40px;
}

.h11-testimonial-slider .quote-icon {
    color: var(--tj-color-theme-dark);
    font-size: 40px;
    line-height: 1;
    display: inline-flex;
}

.h11-testimonial-slider .quote-icon svg {
    width: 40px;
    height: auto;
    fill: var(--tj-color-theme-dark);
}

.h11-testi-content .desc p {
    margin-top: 20px;
    line-height: 1.6;
}

.h11-testi-content .author-header {
    margin-top: 10px;
}

.h11-testi-content .author-header .title {
    margin: 0 0 2px;
    font-weight: var(--tj-fw-sbold, 600);
}

.h11-testi-content .author-header .designation {
    display: inline-block;
    color: var(--tj-color-text-body, #667085);
    font-size: 14px;
}

.h11-testi-author {
    flex: 1 1 52%;
}

.h11-testi-author .author-img {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.h11-testi-author .author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h11-bg-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* The title ("Nos experts en parlent", 42px) and the two fixed-size nav
       buttons (flex-shrink: 0, set by the plugin itself) sit on one
       unwrapped row — on a narrow screen their combined width exceeds the
       viewport, and since nothing here clips horizontal overflow, that
       extra width pushed the whole page into a horizontal scroll (and made
       the spacing below look collapsed/"stuck together", since the real
       layout was partly off-screen). Wrapping the row, shrinking the
       title, and clipping overflow as a safety net fixes both. */
    .h11-testimonial-wrapper {
        overflow-x: hidden;
    }

    .h11-testimonial-top {
        flex-wrap: wrap;
        margin-bottom: 32px;
    }

    .h11-testimonial-wrapper .tes-title {
        font-size: 28px;
    }

    .h11-testimonial-slider .testimonial-item {
        flex-direction: column-reverse;
        padding: 0;
        gap: 24px;
    }

    .h11-testi-content {
        padding: 24px;
    }

    .h11-testi-author {
        width: 100%;
    }

    .h11-testi-author .author-img {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* The plugin's own base CSS (bexon-core.css) sets this same
   ".testimonial-wrapper" class to "margin-inline-end: -12px" below 575px —
   meant for a different testimonial style's carousel, but our markup
   carries that class too. A negative margin widens the element's own box
   past its parent, which the "overflow-x: hidden" above can't catch (that
   only clips this element's children, not itself) — this was the actual
   source of the page's horizontal scroll on phones. */
@media (max-width: 575px) {
    .h11-testimonial-wrapper {
        margin-inline-end: 0;
    }
}

.countup-item.style-2 .count-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 14px;
}

.countup-item.style-2 .count-plus{
    margin-left: 10px;
}

/* ===== Ofi breadcrumb (no plugin, NavXT is disabled) ===== */

.ofi-breadcrumb {
    font-size: 13px;
}

.ofi-breadcrumb a {
    text-decoration: none;
}

.ofi-breadcrumb a:hover {
    text-decoration: underline;
}

.ofi-breadcrumb-sep {
    opacity: 0.6;
}

/* Intermediate page (ofi_is_intermediate_page()): same look as a link,
   but plain text — there is nothing to open. */
.ofi-breadcrumb-text {
    cursor: default;
}

/* TJ Banner - Style 03 (custom, Ofi Invest): light text for the dark banner bg */
.h5-banner-breadcrumb {
    margin-bottom: 12px;
}

.h5-banner-breadcrumb .ofi-breadcrumb,
.h5-banner-breadcrumb .ofi-breadcrumb a,
.h5-banner-breadcrumb .ofi-breadcrumb-text {
    color: rgba(255, 255, 255, 0.75);
}

.h5-banner-breadcrumb .ofi-breadcrumb a:hover {
    color: var(--tj-color-common-white);
}

.h5-banner-breadcrumb .ofi-breadcrumb-current {
    color: var(--tj-color-common-white);
}

.h5-banner-section::after, .h5-banner-section::before {
    display: none;
}

/* Replaces the plugin's diagonal-banded overlay with a soft dark gradient
   confined to the bottom-left corner (where the title sits), fading to
   fully transparent — just enough contrast for the text, image left visible. */
.h5-banner-section .banner-bg::before {
    background: linear-gradient(to top right, rgba(12, 30, 33, 0.85) 0%, rgba(12, 30, 33, 0) 55%);
}

.h5-banner-area  {
    max-width: 1280px;
}

/* Style 03 "Plein écran" (tj_banner_height, class-tj-banner-style3.php):
   the banner fills the screen below the header (--ofi-banner-top is the
   banner's own offset, measured by a small script in the template), with a
   16px breathing space under it, so its text stays above the fold. The
   theme's 215px top padding was meant to clear a transparent overlaid
   header, which this site doesn't use. */
.h5-banner-section.ofi-banner--screen .h5-banner-area {
    min-height: max(480px, calc(100svh - var(--ofi-banner-top, 180px) - 16px));
    padding-top: 80px;
}

@media (max-width: 767px) {
    .h5-banner-section.ofi-banner--screen .h5-banner-area {
        min-height: max(420px, calc(100svh - var(--ofi-banner-top, 120px) - 12px));
        padding-top: 48px;
    }
}

.countup-item.style-2 {
    height: 100%;
}

/* ===== TJ Latest Posts — "Actualités et publications" (Ofi Invest) =====
   Horizontal swipe slider on mobile (one card + a peek of the next) instead
   of the plugin's default stacked single-column grid. CSS-only (native
   scroll-snap, no slider library, no plugin edit) and scoped to this one
   widget type specifically — the Solutions and Actifs grids reuse the same
   .tj-latest-blog/.blog-item markup and are meant to stay a plain stacked
   list on mobile, not become sliders too. */
@media (max-width: 767px) {
    .elementor-widget-tj-latest-posts .tj-latest-blog .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-left: 0;
        margin-right: 0;
        row-gap: 0;
        gap: 16px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .elementor-widget-tj-latest-posts .tj-latest-blog .row::-webkit-scrollbar {
        display: none;
    }

    .elementor-widget-tj-latest-posts .tj-latest-blog .row > [class*="col-"] {
        flex: 0 0 86%;
        max-width: 86%;
        padding-left: 0;
        padding-right: 0;
        scroll-snap-align: start;
    }

    .elementor-widget-tj-latest-posts .tj-latest-blog .blog-item {
        height: 100%;
    }
}

/* Bootstrap's ".row" carries a standard -12px side margin (half its default
   gutter), meant to be absorbed by the equal padding on its own container —
   here that container has none, so the 12px bleeds past the viewport edge
   and makes the whole page horizontally scrollable by that much. Affects
   every widget built on this "tj-latest-blog" markup (Solutions, Actifs,
   Publications); clipping it here doesn't change any card's visible
   spacing, it only contains the invisible 12px excess. */
@media (max-width: 767px) {
    .tj-latest-blog {
        overflow-x: hidden;
    }
}

.text-btn {
    text-transform: none;
}

.blog-item .blog-content .title {
    font-weight: normal;
}
.blog-item .blog-content .title a:hover {
  background-size: 0 !important;
}
/* "Latest Posts" (TJ) widget: 4 columns on large screens, uniform card
   images (fixed ratio, cropped from the top) and equal-height cards. */
@media (min-width: 1200px) {
	.elementor-widget-tj-latest-posts .tj-latest-blog .row > [class*="col-"] {
		flex: 0 0 auto;
		width: 25%;
	}
}

.elementor-widget-tj-latest-posts .tj-latest-blog .row > [class*="col-"] {
	display: flex;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	flex-shrink: 0;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-thumb a {
	display: block;
	width: 100%;
	height: 100%;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Button: pinned to the bottom, left-aligned, never touching the title. */
.elementor-widget-tj-latest-posts .tj-latest-blog .blog-content .title {
	margin-bottom: 24px;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-content .text-btn {
	margin-top: auto;
	align-self: flex-start;
	margin-left: 0;
	padding-left: 0;
	justify-content: flex-start;
	text-align: left;
}

.elementor-widget-tj-latest-posts .tj-latest-blog .blog-content .desc {
	margin-bottom: 24px;
}

.ofi-publications .blog-date,.elementor-widget-tj-latest-posts .blog-date{background:rgba(11,30,26,.72);padding:14px 16px;min-width:70px}
.ofi-publications .blog-date .month small,.elementor-widget-tj-latest-posts .blog-date .month small{display:block;margin-top:5px;font-size:12px;font-weight:600;letter-spacing:1px}

.h11-testimonial-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* ===== Responsive pass: side gutters and overflow on tablet / mobile =====
   Containers left at Elementor's defaults get a 15px gutter on phones
   (explicit per-container padding set in Elementor still wins — it is
   applied to the same variables on the element itself), nested containers
   don't add a second one, and the widgets below never touch the edges. */
@media (max-width: 767px) {
	:root {
		--container-default-padding-left: 15px;
		--container-default-padding-right: 15px;
	}

	.e-con.e-child {
		--container-default-padding-left: 0px;
		--container-default-padding-right: 0px;
	}
}

/* Testimonial slider (Style 10): flush against the screen edges below desktop. */
@media (max-width: 1199px) {
	.h11-testimonial-wrapper {
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	.h11-testimonial-top {
		flex-wrap: wrap;
		gap: 16px;
	}

	.h11-testimonial-side {
		align-items: flex-start;
	}

	/* OFI widgets: never wider than their column, no sideways scroll. */
	.ofi-solutions-widget,
	.ofi-funds-widget,
	.ofi-team,
	.ofi-cslider,
	.ofi-marquee,
	.ofi-publications,
	.ofi-actif-list,
	.ofi-fund-detail,
	.ofi-fund-indicators,
	.ofi-fund-chars {
		max-width: 100%;
		box-sizing: border-box;
	}

	.ofi-publications .container,
	.ofi-actif-list {
		padding-left: 15px;
		padding-right: 15px;
	}

	.ofi-publications__title {
		font-size: 34px;
		line-height: 1.15;
	}

	.ofi-publications__filters,
	.ofi-publications__date {
		width: 100%;
	}

	.ofi-publications__date select {
		flex: 1 1 140px;
	}

	.ofi-fund-detail__card {
		padding: 20px 16px;
	}

	.ofi-fund-detail__card-title {
		font-size: 18px;
	}
}

/* ===== TJ Footer Menu "Style 2" (copyright links) — "Disposition des liens"
   control, see inc/class-ofi-footer-menu-layout.php. The control puts
   ofi-fm-layout-{row|column} (+ -tablet- / -mobile- variants) on the widget
   wrapper; breakpoints match Elementor's defaults (1024px / 767px). ===== */
/* Stretch the widget itself across its container: as a flex child it
   otherwise shrinks to its text, and the centred column ends up off-centre. */
.elementor-widget.ofi-fm-layout-column {
	align-self: stretch;
	width: 100%;
}

.ofi-fm-layout-column .tj-copyright-menu ul {
	flex-direction: column;
	align-items: var(--ofi-fm-align, center);
	gap: var(--ofi-fm-gap, 8px);
}

.ofi-fm-layout-column .tj-copyright-menu ul li {
	margin-inline-end: 0;
	padding-inline-end: 0;
	text-align: center;
}

.ofi-fm-layout-column .tj-copyright-menu ul li::before {
	display: none;
}

@media (max-width: 1024px) {
	/* Stretch the widget itself across its container: as a flex child it
	   otherwise shrinks to its text, and the centred column ends up off-centre. */
	.elementor-widget.ofi-fm-layout-tablet-column {
		align-self: stretch;
		width: 100%;
	}

	.ofi-fm-layout-tablet-column .tj-copyright-menu ul {
		flex-direction: column;
		align-items: var(--ofi-fm-align, center);
		gap: var(--ofi-fm-gap, 8px);
	}

	.ofi-fm-layout-tablet-column .tj-copyright-menu ul li {
		margin-inline-end: 0;
		padding-inline-end: 0;
		text-align: center;
	}

	.ofi-fm-layout-tablet-column .tj-copyright-menu ul li::before {
		display: none;
	}

	/* "En ligne" on tablet under a desktop "En colonne": back to the theme's row. */
	.ofi-fm-layout-tablet-row .tj-copyright-menu ul {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	/* No :not(:last-child) here: it would outweigh the smaller breakpoint's
	   "column" rules below, which must win by source order alone. */
	.ofi-fm-layout-tablet-row .tj-copyright-menu ul li {
		margin-inline-end: 13px;
		padding-inline-end: 12px;
	}

	.ofi-fm-layout-tablet-row .tj-copyright-menu ul li::before {
		display: block;
	}

	.ofi-fm-layout-tablet-row .tj-copyright-menu ul li:last-child {
		margin-inline-end: 0;
		padding-inline-end: 0;
	}

	.ofi-fm-layout-tablet-row .tj-copyright-menu ul li:last-child::before {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Stretch the widget itself across its container: as a flex child it
	   otherwise shrinks to its text, and the centred column ends up off-centre. */
	.elementor-widget.ofi-fm-layout-mobile-column {
		align-self: stretch;
		width: 100%;
	}

	.ofi-fm-layout-mobile-column .tj-copyright-menu ul {
		flex-direction: column;
		align-items: var(--ofi-fm-align, center);
		gap: var(--ofi-fm-gap, 8px);
	}

	.ofi-fm-layout-mobile-column .tj-copyright-menu ul li {
		margin-inline-end: 0;
		padding-inline-end: 0;
		text-align: center;
	}

	.ofi-fm-layout-mobile-column .tj-copyright-menu ul li::before {
		display: none;
	}

	.ofi-fm-layout-mobile-row .tj-copyright-menu ul {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	/* No :not(:last-child) here: it would outweigh the smaller breakpoint's
	   "column" rules below, which must win by source order alone. */
	.ofi-fm-layout-mobile-row .tj-copyright-menu ul li {
		margin-inline-end: 13px;
		padding-inline-end: 12px;
	}

	.ofi-fm-layout-mobile-row .tj-copyright-menu ul li::before {
		display: block;
	}

	.ofi-fm-layout-mobile-row .tj-copyright-menu ul li:last-child {
		margin-inline-end: 0;
		padding-inline-end: 0;
	}

	.ofi-fm-layout-mobile-row .tj-copyright-menu ul li:last-child::before {
		display: none;
	}
}

/* Horizontal scroll of ~15px between 768 and ~1340px, two causes:
   - the TJ Header widget's own "Margin" setting (0 -15px) pulls the header
     past its container; below 768px the container's 15px side padding
     absorbs it, and above ~1340px the header is boxed (1310px wide) so it
     has room. In between, it overflowed the screen by 15px (horizontal
     scroll, logo cut at the left edge), so the margin is cancelled there
     (clipping the overflow instead, as done before, cut the logo off);
   - Bootstrap's -12px .row margin in the card grids, when their section
     has no side padding (Solutions on the home page): contained at every
     width — `clip` doesn't create a scroll container; `hidden` first as
     the fallback for browsers without `clip` (Safari < 16). */
@media (min-width: 768px) and (max-width: 1340px) {
	.elementor-widget-tj-header .header-area {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

.tj-latest-blog {
	overflow-x: hidden;
	overflow-x: clip;
}