/* ObitERP brand overrides — loaded AFTER color.css and all Sasen module CSS */
:root {
    --obit-green-50:  #f0fdf4;
    --obit-green-100: #dcfce7;
    --obit-green-400: #4ade80;
    --obit-green-500: #22c55e;
    --obit-green-600: #16a34a;
    --obit-green-700: #15803d;
    --obit-green-900: #14532d;
    --obit-dark:      #0f172a;
    --obit-gradient:  linear-gradient(270deg, #15803d 0%, #22c55e 100%);
    --obit-gradient-reverse: linear-gradient(270deg, #22c55e 0%, #15803d 100%);
}

/* =========================================================
   FILLED BUTTONS — gradient fill (btn-large, btn-1, filled theme-btn variants)
   ========================================================= */
.btn-large,
.btn-large:hover,
.link-box .btn-large,
.link-box .btn-large:hover,
.link-box .btn-large.contact-us,
.link-box .btn-large.back-one,
.link-box .btn-large.team-btn,
.btn-1,
.btn-1:hover,
.cta-section .btn-1,
.cta-section .btn-1:hover,
.theme-btn.btn-three,
.theme-btn.btn-four,
.theme-btn.three,
.theme-btn.four,
.theme-btn.four.btn-bg-color,
button[type="submit"].btn-large,
button.contact-us {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-large:hover,
.link-box .btn-large:hover,
.btn-1:hover,
.theme-btn.btn-four:hover,
.theme-btn.btn-three:hover {
    /*background: var(--obit-gradient-reverse) !important;*/
    /*background-image: var(--obit-gradient-reverse) !important;*/
    color: #fff !important;
}
.link-box .btn-large:before,
.btn-1:before,
.theme-btn.btn-four:before,
.theme-btn.btn-three:before {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}

/* =========================================================
   HEADER DEMO BUTTON — outlined pill, fills green on hover
   (matches Sasen's .theme-btn default pattern)
   ========================================================= */
.start_trils_btn .theme-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--obit-dark) !important;
    color: var(--obit-dark) !important;
}
.start_trils_btn .theme-btn:hover {
    border-color: var(--obit-green-600) !important;
    color: #fff !important;
}
.start_trils_btn .theme-btn:before,
.start_trils_btn .theme-btn:after {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}

/* "read more" — pill outlined vert au repos, se remplit en dégradé vert au survol
   (reprend le pattern Sasen : :before slide de 0% → 100%, texte devient blanc) */
.read-more {
    color: var(--obit-green-600) !important;
}
.read-more .icon {
    color: var(--obit-green-600) !important;
}
.read-more:before {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}
.read-more:hover,
.read-more:hover .icon {
    color: #ffffff !important;
}

/* =========================================================
   ICON BOXES — light green pastel circle, green gradient glyph
   (mirrors Sasen's pastel-circle + gradient-text pattern)
   ========================================================= */
.features-block .inner-box .icon-box,
.service-style-one .inner-box .icon-box,
.services-section .icon-box,
.service-details-section .icon-box {
    background: var(--obit-green-100) !important;
    background-color: var(--obit-green-100) !important;
    background-image: none !important;
    border-color: var(--obit-green-100) !important;
    color: var(--obit-green-700) !important;
}
.features-block .inner-box .icon-box span,
.features-block .inner-box .icon-box .icon,
.service-style-one .inner-box .icon-box span,
.service-style-one .inner-box .icon-box .icon,
.services-section .icon-box span,
.services-section .icon-box .icon {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* fun-facts counter circles — Sasen applique un dégradé violet via
   background-clip: text. Il faut donc remplacer le dégradé de fond,
   pas la couleur (qui est volontairement transparente). */
.column.count-box .inner .content .count-outer,
.fun-facts-section .count-outer {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.count-box .inner {
    color: var(--obit-green-700) !important;
}

/* =========================================================
   TEXT ACCENTS — subtitles, hovers, numbers
   ========================================================= */
.sec-title .subtitle,
.sec-title h4,
.title-box .subtitle,
.title-content .subtitle,
.banner-section h4,
.banner-section .content-box .inner h4,
.features-block h3 a:hover,
.service-style-one h3 a:hover,
.news-block-one h4 a:hover,
.news-block-one .category a,
.news-block-one .category a:hover,
.services-section .sec-title h4,
.service-details-section .sec-title h4,
.fun-facts-section .count-text,
.count-box .count-text,
.count-outer .count-text {
    color: var(--obit-green-600) !important;
}

/* Links hover */
a { color: inherit; }
a:hover { color: var(--obit-green-600); }

/* =========================================================
   HEADER / MENU — purple hovers & dropdown borders → green
   ========================================================= */
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li.current-menu-item > a,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a {
    color: var(--obit-green-600) !important;
}
.main-menu .navigation > li > ul,
.main-menu .navigation > li > .megamenu,
.main-menu .navigation > li > ul > li > ul,
.sticky-header .main-menu .navigation > li > ul,
.sticky-header .main-menu .navigation > li > ul > li > ul {
    border-top: 2px solid var(--obit-green-600) !important;
}
.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > ul > li:hover > a,
.sticky-header .main-menu .navigation > li > ul > li:hover > a {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    color: #fff !important;
}

/* Search toggler — keep Sasen's default dark color, no brand tint */

/* =========================================================
   LAYOUT — equal-height cards + centered last row for 7-item grids
   ========================================================= */
.features-section .row,
.services-section .row,
.fun-facts-section .row,
.blog-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.features-block,
.service-style-one,
.news-block-one,
.count-box {
    display: flex;
    flex-direction: column;
}
.features-block .inner-box,
.service-style-one .inner-box,
.news-block-one .inner-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.news-block-one .inner-box {
    align-items: stretch;
    text-align: left;
}
.news-block-one .inner-box .image,
.news-block-one .inner-box .lower-content {
    width: 100%;
}
.service-style-one .inner-box .text,
.news-block-one .lower-content .text {
    flex: 1 1 auto;
}

/* =========================================================
   CTA SECTION — was purple gradient, now green gradient
   ========================================================= */
.cta-section {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}

/* =========================================================
   BREADCRUMB — last item had purple gradient text
   ========================================================= */
.page-title .bread-crumb li:last-child {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* =========================================================
   BLOG — category badge was purple gradient text
   ========================================================= */
.news-block-one .lower-content .category a,
.news-block-one .category a {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.news-block-one .lower-content .category a:hover,
.news-block-one h4 a:hover,
.news-block-one .post-meta li:hover,
.blog-section .read-more,
.blog-details-content a:hover {
    color: var(--obit-green-600) !important;
}

/* =========================================================
   FOOTER — subscribe button, social-icon hovers
   ========================================================= */
.form-group .subscribe-btn,
.form-group .subscribe-btn:hover,
.subscribe-inner button,
.subscribe-inner button:hover,
.footer-widget .subscribe-form button,
.main-footer .widget-title:after {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Icônes réseaux sociaux du footer : pastille blanche au repos,
   remplissage dégradé vert au survol (pattern Sasen :before slide) */
.main-footer .social-links li a::before {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}
.main-footer .social-links li a:hover {
    color: #ffffff !important;
}
.main-footer a:hover,
.footer-widget .links-list li a:hover {
    color: var(--obit-green-400) !important;
}
/* Lien "ObitERP" dans la mention copyright (footer-bottom) — Sasen
   le code en violet #6600FF. On le repasse au vert ObitERP. */
.footer-bottom p a,
.footer-bottom p a:hover {
    color: var(--obit-green-600) !important;
}

/* =========================================================
   PRICING / TESTIMONIAL / TEAM / GALLERY / PROJECT / PROGRESS
   — blanket the remaining purple gradients used in those modules
   ========================================================= */
.pricing-block .pricing-table,
.pricing-block .pricing-table:hover,
.pricing-block .table-header:before,
.pricing-block .btn-box a:hover,
.testimonial-block .inner-box:hover,
.testimonial-block .quote-icon,
.team-block .social-links li a:hover,
.gallery-block .image-box:before,
.project-block .image-box:before,
.progress-box .bar-fill {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}

/* Logo sizing */
.logo img, .nav-logo img { max-height: 28px; width: auto; }

/* =========================================================
   BANNER DASHBOARD — Sasen positionne l'aperçu en absolute
   sans left/right (déborde à droite). On le passe en pleine
   largeur d'écran, centré, en cassant la contrainte du
   conteneur .auto-container.
   ========================================================= */
.banner-section .banner-dasboard {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 1020px;

    transform: translateX(-50%);
}
.banner-section .banner-dasboard img {
    width: 100%;
    display: block;
}
/* L'animation float-bob-y a une transform translateY qui écrase
   notre translateX. On la recompose pour conserver le centrage. */
.banner-section .banner-dasboard.float-bob-y {
    animation-name: obit-float-bob-y;
}
@keyframes obit-float-bob-y {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(-15px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* =========================================================
   PRELOADER — Sasen utilise un fond violet #CB38FF codé en dur
   dans style.css. On le repasse au dégradé vert ObitERP.
   ========================================================= */
.handle-preloader {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
}
.preloader-close {
    background: #ffffff !important;
    color: var(--obit-green-700) !important;
}
/* Le .preloader porte une image de fond SVG (icons/preloader.svg)
   aux teintes violettes — on la retire pour laisser apparaître
   uniquement le dégradé du .handle-preloader. */
.preloader {
    background-image: none !important;
}

/* =========================================================
   SCROLL-TO-TOP — Sasen ships purple gradient, recolor to ObitERP green
   The ::before overlay must inherit border-radius or it paints
   a square fill over the rounded corners on hover.
   ========================================================= */
.scroll-to-top {
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.scroll-to-top::before {
    background: var(--obit-green-900) !important;
    background-image: none !important;
    border-radius: inherit !important;
}
.scroll-to-top .fa,
.scroll-to-top span {
    color: #ffffff !important;
}

/* =========================================================
   HEADER CONTRAST — default Sasen menu links are #2f2f2f,
   which becomes invisible on the dark page-title banner.
   Make nav items white by default, then restore dark when
   the fixed/sticky header is active (white background).
   ========================================================= */
.main-header .main-menu .navigation > li > a,
.main-header .menu-area .search-box-btn {
    color: #ffffff !important;
}
.main-header.fixed-header .main-menu .navigation > li > a,
.main-header.fixed-header .menu-area .search-box-btn,
.sticky-header .main-menu .navigation > li > a,
.sticky-header .menu-area .search-box-btn {
    color: #2f2f2f !important;
}
.main-header .main-menu .navigation > li:hover > a,
.main-header .main-menu .navigation > li.current > a,
.main-header.fixed-header .main-menu .navigation > li:hover > a,
.main-header.fixed-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a {
    color: var(--obit-green-400) !important;
}
.main-header.fixed-header .main-menu .navigation > li:hover > a,
.main-header.fixed-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a {
    color: var(--obit-green-600) !important;
}

/* =========================================================
   HOMEPAGE HEADER — fond clair (banner lavande), donc
   liens et icônes du menu en sombre (non pas blanc)
   ========================================================= */
.header-home.main-header .main-menu .navigation > li > a,
.header-home.main-header .menu-area .search-box-btn {
    color: #2f2f2f !important;
}
.header-home.main-header .main-menu .navigation > li:hover > a,
.header-home.main-header .main-menu .navigation > li.current > a {
    color: var(--obit-green-600) !important;
}

/* Demo button in header: outlined white at top (pages sombres), outlined dark on sticky */
.main-header .start_trils_btn .theme-btn,
.main-header .main-box .start_trils_btn .theme-btn,
.main-header .outer-box .start_trils_btn .theme-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
}
/* Homepage : fond clair → bouton démonstration en sombre */
.header-home.main-header .start_trils_btn .theme-btn,
.header-home.main-header .main-box .start_trils_btn .theme-btn,
.header-home.main-header .outer-box .start_trils_btn .theme-btn {
    border: 1.5px solid var(--obit-dark) !important;
    color: var(--obit-dark) !important;
}
.main-header.fixed-header .start_trils_btn .theme-btn,
.sticky-header .start_trils_btn .theme-btn {
    border: 1px solid var(--obit-dark) !important;
    color: var(--obit-dark) !important;
}
.main-header .start_trils_btn .theme-btn:hover,
.main-header.fixed-header .start_trils_btn .theme-btn:hover,
.sticky-header .start_trils_btn .theme-btn:hover {
    border-color: var(--obit-green-600) !important;
    color: #ffffff !important;
}

/* =========================================================
   FORM POLISH — Sasen's .default-form only styles text/email
   inputs as pills. Extend the same look to selects (nice-select),
   tel/search/number/url inputs, and make the submit button a proper
   pill when wrapped in .link-box.
   ========================================================= */
.default-form .form-group input[type='tel'],
.default-form .form-group input[type='search'],
.default-form .form-group input[type='number'],
.default-form .form-group input[type='url'],
.default-form .form-group input:not([type]) {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 66px;
    font-size: 16px;
    color: #101A30;
    padding: 10px 20px;
    text-align: left;
    transition: all 500ms ease;
    background: #fff;
}
.default-form .form-group .nice-select,
.default-form .form-group select {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 66px;
    font-size: 16px;
    color: #101A30;
    padding: 0 40px 0 20px;
    background: #fff;
    position: relative;
}
.default-form .form-group .nice-select {
    float: none;
}
.default-form .form-group .nice-select:after {
    right: 20px;
    border-color: var(--obit-green-600);
}
.default-form .form-group .nice-select .list {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 10;
}
.default-form .form-group .nice-select .option:hover,
.default-form .form-group .nice-select .option.selected.focus {
    background: var(--obit-green-100);
    color: var(--obit-green-700);
}

/* Styles scopés à .default-form (classe officielle Sasen utilisée sur
   whitepapers, webinars, contact, demo). N'affecte PAS le footer
   newsletter qui n'a pas cette classe — il garde son styling natif. */
.default-form h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--obit-dark);
    margin-bottom: 22px;
}
.default-form .form-group {
    position: relative;
    margin-bottom: 15px;
}
.default-form .form-group input[type='text'],
.default-form .form-group input[type='email'],
.default-form .form-group input[type='tel'],
.default-form .form-group input[type='search'],
.default-form .form-group input[type='number'],
.default-form .form-group input[type='url'],
.default-form .form-group input:not([type]),
.default-form .form-group textarea,
.default-form .form-group select {
    display: block;
    width: 100%;
    height: 50px;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    font-size: 15px;
    color: #101A30;
    padding: 10px 22px;
    background: #ffffff;
    transition: all 300ms ease;
}
.default-form .form-group textarea {
    height: 130px;
    border-radius: 20px;
    padding: 14px 22px;
    resize: vertical;
    font-family: inherit;
}
.default-form .form-group input::placeholder,
.default-form .form-group textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}
.default-form .form-group input:focus,
.default-form .form-group textarea:focus,
.default-form .form-group select:focus {
    border-color: var(--obit-green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
    outline: none;
}
.default-form .form-group .btn-large,
.default-form .form-group button[type='submit'] {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 13px 36px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    color: #ffffff !important;
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    cursor: pointer;
    transition: all 300ms ease;
}
.default-form .form-group .btn-large:hover,
.default-form .form-group button[type='submit']:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
}
.default-form small,
.form-inner small {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}
.default-form small a,
.form-inner small a {
    color: var(--obit-green-700);
    text-decoration: underline;
}

/* Make the wrapped submit button look like the header / banner pill */
.default-form .message-btn .link-box .btn-large,
.default-form .message-btn .link-box .btn-large.contact-us {
    display: inline-block;
    padding: 13px 40px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    font-family: var(--text-font);
    border-radius: 55px;
    border: none;
    color: #fff !important;
    background: var(--obit-gradient) !important;
    background-image: var(--obit-gradient) !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.default-form .message-btn .link-box .btn-large:hover {
    background: var(--obit-gradient-reverse) !important;
    background-image: var(--obit-gradient-reverse) !important;
}

/* =========================================================
   SECTION SPACING — Sasen leaves padding-top off several
   sections (about, blog, fun-facts) because demo pages put
   a hero-style block before them. On our pages these sections
   often follow .page-title directly, so we need a top buffer.
   ========================================================= */
.about-section,
.blog-section,
.fun-facts-section,
.social-contact-section,
.contact-section {
    padding-top: 120px;
}
.page-title + .about-section,
.page-title + .blog-section,
.page-title + .fun-facts-section,
.page-title + .social-contact-section,
.page-title + .contact-section,
.page-title + section {
    padding-top: 120px;
}