@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html
{
    height: 101%;
    font-size: 100%;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin: 0;
}

body
{
    margin: 0;
    padding: 0;
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    line-height: inherit;
}

.theme-button.theme-mode-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background-color: rgba(148, 163, 184, 0.12);
    color: rgb(31, 41, 55);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-mode-button .theme-mode-icon
{
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.theme-mode-button .theme-mode-icon i
{
    line-height: 1;
}

.theme-mode-button .theme-mode-icon--moon
{
    display: flex;
}

.theme-mode-button:hover
{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.theme-mode-button:active
{
    transform: scale(0.97);
    box-shadow: none;
}

.theme-mode-button:focus,
.theme-mode-button:focus-visible
{
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
}

@media (prefers-reduced-motion: reduce)
{
    .theme-mode-button { transition: none; }
    .theme-mode-button:hover,
    .theme-mode-button:active
    {
        transform: none;
        box-shadow: none;
    }
}

nav .form-switch.m-0
{
    display: none !important;
}

@media (max-width: 991.98px)
{
    .navbar-nav .theme-button { display: none !important; }
}

@media (min-width: 992px)
{
    #themeBtnMobile { display: none !important; }
}

.bg-blog
{
    background: rgb(205 34 110);
}

.txt-blog
{
    color: rgb(205 34 110);
}

.btn-blog
{
    background: rgb(205 34 110);
    color: rgb(255, 255, 255);
}

.btn-blog:hover
{
    background: rgb(201, 62, 125);
    color: rgb(255, 255, 255);
}

.btn-outline-blog
{
    background: transparent;
    border: 1px solid rgb(205 34 110);
    color: rgb(205 34 110);
}

.btn-outline-blog:hover
{
    background: rgb(205 34 110);
    color: rgb(255, 255, 255);
}

.blog
{
    max-width: 100%;
    background: var(--bs-body-bg);
    box-shadow: 0px 0px 5px 3px rgba(85, 85, 85, 0.53);
    -webkit-box-shadow: 0px 0px 5px 3px rgba(85, 85, 85, 0.53);
    -moz-box-shadow: 0px 0px 5px 3px rgba(85, 85, 85, 0.53);
    margin: 0 auto
}

.blog::after
{
    clear: both;
    content: "";
    display: table
}

.blog .jumbotron
{
    height: 380px;
    color: var(--bs-body-bg);
    border-bottom: 15px solid rgb(205 34 110);
    background: rgb(189, 173, 222);
    background-image: linear-gradient(to right, rgba(205, 34, 110, 0.2), rgba(205, 34, 110, 0.2)), url("images/bg/backgr10.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 0px;
}

.blog .jumbotron h1,
.blog .jumbotron p
{
    color: rgb(255, 255, 255);
}

.blog #header-banner
{
    position: relative;
}

.blog #header-banner .zeina-header-video
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blog #header-banner .header-content
{
    position: relative;
    z-index: 2;
}

.blog .body
{
    height: 100%;
    min-height: 100vh;
    line-height: 1.6em;
    margin: 1.5em 0 2em 0;
    display: block
}

.blog .body .lien
{
    color: rgb(77, 77, 77);
    text-decoration: none
}

.blog .body .lien:hover
{
    color: rgb(146, 146, 146)
}

.blog .body .carousel-img
{
    width: 100%;
    height: 300px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog .body .rounded-size
{
    width: 120px;
    height: 120px
}

.blog .body .card-img-logo
{
    top: -60px;
    position: relative;
    text-align: center;
    margin-bottom: -50px
}

.blog .body .card-img-bg
{
    width: 100%;
    height: 200px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog .body .card-img-bg-big
{
    width: 100%;
    height: 300px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog .body .card-text-home
{
    height: 90px
}

.blog .body .form-control-color
{
    max-width: 100%
}

.blog .body .nav-link-tabs
{
    display: inline
}

@media screen and (max-width: 576px)
{
    .blog .body .nav-link-tabs
    {
        display: none
    }
}

.blog .body .pagination
{
    margin-bottom: 0px
}

.blog .body pre[class="quote"]
{
    word-wrap: break-word;
    white-space: pre-wrap;
    border-left: 10px solid rgb(186, 143, 0);
    background: rgb(39, 40, 34);
    border-radius: 3px;
    padding: 15px
}

.blog .body pre[class="quote"] pre[class="quote"]
{
    background: rgb(59, 59, 58)
}

.blog .body pre[class="quote"] blockquote
{
    color: rgb(248, 248, 242)
}

.blog .body pre[class="code"]
{
    border-left: 10px solid rgb(0, 140, 186);
    background: rgb(39, 40, 34);
    padding: 0.35rem 1rem;
    border-radius: 3px
}

.blog .body pre[class="code"] code
{
    display: block;
    max-height: 400px;
    overflow: auto;
    white-space: wrap;
    color: rgb(248, 248, 242)
}

.blog .body .youtube
{
    position: relative;
    padding-bottom: 56.10%;
    height: 0;
    overflow: hidden
}

.blog .body .youtube iframe,
.blog .body .youtube object,
.blog .body .youtube embed
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.blog .prefooter
{
    background: rgb(205 34 110);
    color: rgb(255, 255, 255)
}

.blog .footer
{
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(24, 24, 24)
}

.blog .footer .img-mobile
{
    max-width: 100%;
    max-height: 100%;
    height: auto
}

.blog .footer .lien
{
    color: rgb(255, 255, 255);
    text-decoration: none
}

.blog .footer .lien:hover
{
    color: rgb(143, 113, 202);
    text-decoration: none
}

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb
{
    background: rgb(205 34 110);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover
{
    background: rgb(205 34 110);
}

::-webkit-scrollbar-track
{
    border-radius: 0px;
}

@media screen and (max-width: 576px)
{
    .blog .body .nav-link-tabs
    {
        display: none;
    }
}

@media screen and (max-width: 768px)
{
    .blog .jumbotron
    {
        height: 200px;
    }
    
    .blog .footer .img-mobile
    {
        max-width: 50%;
        max-height: 50%;
    }
}

/* ***************************** */
/* SCEditor                      */
/* ***************************** */
.sceditor-container
{
    --editor-surface: rgb(255, 255, 255);
    --editor-surface-alt: rgb(243, 244, 246);
    --editor-border: rgba(15, 23, 42, 0.12);
    --editor-text: rgb(31, 41, 55);
    --editor-button-hover: rgba(15, 23, 42, 0.08);
    --editor-button-border-hover: rgba(15, 23, 42, 0.18);
    background-color: var(--editor-surface);
    border-color: var(--editor-border);
    color: var(--editor-text);
}

.sceditor-container .sceditor-toolbar
{
    background: var(--editor-surface-alt);
    border-bottom: 1px solid var(--editor-border);
    color: var(--editor-text);
}

.sceditor-container .sceditor-toolbar .sceditor-button
{
    border-color: transparent;
    color: var(--editor-text);
}

.sceditor-container .sceditor-toolbar .sceditor-button:hover,
.sceditor-container .sceditor-toolbar .sceditor-button.active
{
    background: var(--editor-button-hover);
    border-color: var(--editor-button-border-hover);
}

.sceditor-container .sceditor-group
{
    border-color: var(--editor-border);
}

.sceditor-container iframe
{
    background: var(--editor-surface);
}

.sceditor-container textarea
{
    background-color: var(--editor-surface);
    color: var(--editor-text);
    border: none;
    caret-color: var(--editor-text);
}

.sceditor-container.dark
{
    --editor-surface: rgb(15, 23, 42);
    --editor-surface-alt: rgb(30, 41, 59);
    --editor-border: rgba(148, 163, 184, 0.35);
    --editor-text: rgb(226, 232, 240);
    --editor-button-hover: rgba(148, 163, 184, 0.2);
    --editor-button-border-hover: rgba(148, 163, 184, 0.45);
}

.grecaptcha-badge
{
    visibility: hidden
}

/* ***************************** */
/* Dark Theme Breadcrumb Styles  */
/* ***************************** */

[data-bs-theme="dark"]
{
    --bs-body-bg: rgb(27, 35, 53);
    --bs-card-bg: rgb(15, 23, 42);
    --bs-dropdown-bg: rgb(15, 23, 42);
    --bs-list-group-bg: rgb(15, 23, 42);
    --bs-modal-bg: rgb(15, 23, 42);
    --bs-modal-content-bg: rgb(15, 23, 42);
    --bs-offcanvas-bg: rgb(15, 23, 42);
    --bs-accordion-bg: rgb(15, 23, 42);
    --bs-accordion-btn-bg: rgb(15, 23, 42);
    --bs-popover-bg: rgb(15, 23, 42);
}

[data-bs-theme="dark"] body
{
    background-color: rgb(27, 35, 53) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .alert
{
    background-color: rgb(15, 23, 42) !important;
}

[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .accordion,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-body,
[data-bs-theme="dark"] .accordion-button,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item
{
    background-color: rgb(27, 35, 53) !important;
}

[data-bs-theme="dark"] nav.navbar
{
    background-color: rgb(15, 23, 42) !important;
}

[data-bs-theme="dark"] .theme-button i
{
    color: inherit;
}

[data-bs-theme="dark"] .theme-mode-button
{
    background-color: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.35);
    color: rgb(226, 232, 240);
}

[data-bs-theme="dark"] .theme-mode-button .theme-mode-icon--moon
{
    display: none;
}

[data-bs-theme="dark"] .theme-mode-button .theme-mode-icon--sun
{
    display: flex;
}

[data-bs-theme="dark"] .blog .body .breadcrumb
{
    background-color: rgba(255,255,255,0.02);
    --bs-breadcrumb-divider-color: rgba(255,255,255,0.45);
}

[data-bs-theme="dark"] .blog .body .breadcrumb .breadcrumb-item a
{
    color: rgba(255,255,255,0.88);
    text-decoration: none;
}

[data-bs-theme="dark"] .blog .body .breadcrumb .breadcrumb-item a:hover,
[data-bs-theme="dark"] .blog .body .breadcrumb .breadcrumb-item a:focus
{
    color: rgb(205,34,110);
    text-decoration: underline;
}

[data-bs-theme="dark"] .blog .body .breadcrumb .breadcrumb-item.active
{
    color: rgba(255,255,255,0.65);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track
{
    background: rgb(27, 35, 53);
}

/* ***************************** */
/* Light Theme Breadcrumb Styles */
/* ***************************** */

[data-bs-theme="light"]
{
    --bs-body-bg: rgb(243, 244, 246);
    --bs-card-bg: rgb(255, 255, 255);
    --bs-dropdown-bg: rgb(255, 255, 255);
    --bs-list-group-bg: rgb(255, 255, 255);
    --bs-modal-bg: rgb(255, 255, 255);
    --bs-modal-content-bg: rgb(255, 255, 255);
    --bs-offcanvas-bg: rgb(255, 255, 255);
    --bs-accordion-bg: rgb(255, 255, 255);
    --bs-accordion-btn-bg: rgb(255, 255, 255);
    --bs-popover-bg: rgb(255, 255, 255);
}

[data-bs-theme="light"] body
{
    background-color: rgb(243, 244, 246) !important;
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .breadcrumb,
[data-bs-theme="light"] .alert
{
    background-color: rgb(255, 255, 255) !important;
}

[data-bs-theme="light"] nav.navbar
{
    background-color: rgb(255, 255, 255) !important;
}

[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .offcanvas,
[data-bs-theme="light"] .accordion,
[data-bs-theme="light"] .accordion-item,
[data-bs-theme="light"] .accordion-body,
[data-bs-theme="light"] .accordion-button,
[data-bs-theme="light"] .popover,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .list-group-item
{
    background-color: rgb(243, 244, 246) !important;
}

[data-bs-theme="light"] .theme-button i
{
    color: inherit;
}

[data-bs-theme="light"] .theme-mode-button
{
    background-color: rgba(148, 163, 184, 0.12);
    border-color: rgba(15, 23, 42, 0.15);
    color: rgb(31, 41, 55);
}

[data-bs-theme="light"] .theme-mode-button .theme-mode-icon--moon
{
    display: flex;
}

[data-bs-theme="light"] .theme-mode-button .theme-mode-icon--sun
{
    display: none;
}

[data-bs-theme="light"] .breadcrumb
{
    background-color: rgba(0,0,0,0.02);
    --bs-breadcrumb-divider-color: rgba(0,0,0,0.4);
}

[data-bs-theme="light"] .blog .body .breadcrumb .breadcrumb-item a
{
    color: rgb(34,34,34);
    text-decoration: none;
}

[data-bs-theme="light"] .blog .body .breadcrumb .breadcrumb-item a:hover,
[data-bs-theme="light"] .blog .body .breadcrumb .breadcrumb-item a:focus
{
    color: rgb(205,34,110);
    text-decoration: underline;
}

[data-bs-theme="light"] .blog .body .breadcrumb .breadcrumb-item.active
{
    color: rgb(77,77,77);
}

[data-bs-theme="light"] ::-webkit-scrollbar-track
{
    background: rgb(255, 255, 255);
}