/* Transparent + mobile: theme sets `header.header-mobile` after `header.transparent` and
   uses `--title-font-color`; desktop scrolled bar uses `--bg-dark-1`. Align mobile/tablet
   bar to the scrolled desktop header. */
header.transparent.header-mobile {
    background: var(--bg-dark-1);
}

/* Header: vertically center every item across all breakpoints (theme `.de-flex`
   has no align-items, so columns stretch and content drifts to the top). */
header .de-flex,
header .shop-header-de-flex,
header .de-flex > .de-flex-col,
header .menu_side_area,
header .header-actions-wrapper,
header .menu-toggle-wrapper {
    align-items: center !important;
}

header .de-flex > .de-flex-col {
    align-self: center !important;
}

header #logo,
header div#logo,
header #logo a {
    display: inline-flex;
    align-items: center;
}

/* Equal control height so the toolbar reads as one centered row */
header .menu_side_area .btn-main,
header .menu_side_area .language-switch-btn,
header .header-actions-wrapper .lang-switch-btn,
header #btn-cart .shop-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Header Logo Styling */
header div#logo {
    max-width: 100px !important;
}

header div#logo img,
header .logo-main,
header .logo-mobile {
    max-width: 100px !important;
    width: auto !important;
    height: auto !important;
}

/* Tablet (768–1199px): logo a touch smaller than desktop/mid widths. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    header div#logo {
        max-width: 80px !important;
    }

    header div#logo img,
    header .logo-main,
    header .logo-mobile {
        max-width: 80px !important;
        width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 465px) {
    header div#logo {
        max-width: 60px !important;
    }

    header div#logo img,
    header .logo-main,
    header .logo-mobile {
        max-width: 60px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Small phones (~380px and below): smaller still. */
@media (max-width: 400px) {
    header div#logo {
        max-width: 52px !important;
    }

    header div#logo img,
    header .logo-main,
    header .logo-mobile {
        max-width: 52px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Menu Button Text Styling - matches language switcher button style */
#menu-btn-text {
    display: none;
    float: right;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif !important;
    margin-top: 0px;
    margin-left: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

#menu-btn-text:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

#menu-btn-text.menu-open {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Show menu button text on mobile / tablet only (base + shared; desktop keeps it hidden) */
@media (min-width: 1200px) {
    #menu-btn-text {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    #menu-btn-text {
        display: block;
    }

    /* Collapse the main menu until toggled (direction-agnostic; fixes LTR first-item peek).
       JS toggles the `menu-open` class on <header>; !important overrides jQuery .show() inline display. */
    header.header-mobile #mainmenu {
        display: none !important;
    }

    header.header-mobile.menu-open #mainmenu {
        display: block !important;
    }

    /* Mobile submenu toggles: theme PNGs + LTR/RTL physical edges misalign; use logical
       inset + CSS caret so arrows read clearly in English and Persian. */
    header.transparent.header-mobile #mainmenu li.menu-item-has-children {
        position: relative;
    }

    header.transparent.header-mobile #mainmenu li.menu-item-has-children > a.menu-item {
        padding-inline-end: 48px !important;
    }

    header.transparent.header-mobile #mainmenu > li > span,
    header.transparent.header-mobile #mainmenu li > ul > li > span {
        background: none !important;
        right: auto !important;
        left: auto !important;
        inset-inline-end: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        height: 36px !important;
        width: 36px !important;
    }

    header.transparent.header-mobile #mainmenu > li > span::after,
    header.transparent.header-mobile #mainmenu li > ul > li > span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        margin: -5px 0 0 -4px;
        border-right: 2px solid rgba(255, 255, 255, 0.92);
        border-bottom: 2px solid rgba(255, 255, 255, 0.92);
        transform: rotate(45deg);
        box-sizing: border-box;
        pointer-events: none;
    }

    header.transparent.header-mobile #mainmenu > li > span.active::after,
    header.transparent.header-mobile #mainmenu li > ul > li > span.active::after {
        margin-top: -1px;
        transform: rotate(-135deg);
    }
}

/* --------------------------------------------------------------------------
   Global: fixed header clearance (exact pixel height, no guessed rem margins)
   `site-header-offset.js` sets `--site-header-offset` on <html> from layout measurement.
   Fallback `96px` avoids a flash before JS runs.
   - ≤1199.98px: `#content` margin-top matches fixed `header.header-mobile` chrome height.
   - ≥1200px + `#content.no-hero`: constant padding-top (desktop top bar height; stable on scroll).
   -------------------------------------------------------------------------- */

:root {
    /* Pull content up slightly vs measured header height to remove a 1–2px hairline. */
    --site-header-fudge: 1px;
    /* Header & footer body text/links (RGB 0·20·90); backgrounds unchanged elsewhere. */
    --site-header-footer-text: rgb(0, 20, 90);
}

html {
    scroll-padding-top: max(0px, calc(var(--site-header-offset, 96px) - var(--site-header-fudge)));
}

@media only screen and (max-width: 1199.98px) {
    #wrapper #content {
        margin-top: max(0px, calc(var(--site-header-offset, 96px) - var(--site-header-fudge))) !important;
    }
}

@media only screen and (min-width: 1200px) {
    #wrapper #content.no-hero {
        padding-top: max(0px, calc(var(--site-header-offset, 96px) - var(--site-header-fudge))) !important;
    }
}

/* Certifications Carousel — fewer items, larger images */
.certifications-carousel .item {
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 16px 20px;
    box-sizing: border-box;
}

.certifications-carousel .item a {
    display: block;
    width: 100%;
}

.certifications-carousel .item img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 6px;
}

.certifications-carousel .item a:hover img {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
    .certifications-carousel .item {
        min-height: 280px;
    }

    .certifications-carousel .item img {
        max-height: 380px;
    }
}

@media (min-width: 1200px) {
    .certifications-carousel .item img {
        max-height: 420px;
    }
}

@media (max-width: 575px) {
    .certifications-carousel .item {
        min-height: 180px;
        padding: 12px;
    }

    .certifications-carousel .item img {
        max-height: 240px;
    }
}

/* Certification lightbox — full-page with open/close animation */
body.cert-lightbox-open {
    overflow: hidden;
}

.certification-lightbox-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.certification-lightbox-overlay.is-open {
    background: rgba(0, 0, 0, 0.92);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.certification-lightbox-overlay.is-closing {
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.certification-lightbox-overlay .cert-lightbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 95vw;
    max-height: 95vh;
    transform: scale(0.75);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.certification-lightbox-overlay.is-open .cert-lightbox-stage {
    transform: scale(1);
    opacity: 1;
}

.certification-lightbox-overlay.is-closing .cert-lightbox-stage {
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.certification-lightbox-overlay img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.certification-lightbox-overlay .cert-lightbox-caption {
    margin-top: 1.25rem;
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.certification-lightbox-overlay.is-open .cert-lightbox-caption {
    opacity: 1;
    transform: translateY(0);
}

.certification-lightbox-overlay.is-closing .cert-lightbox-caption {
    opacity: 0;
    transform: translateY(8px);
    transition-delay: 0s;
}

.certification-lightbox-overlay .cert-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s, background 0.2s ease;
}

.certification-lightbox-overlay.is-open .cert-lightbox-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.certification-lightbox-overlay .cert-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Anchor scroll offset for fixed / sticky header */
[id] {
    scroll-margin-top: max(1rem, calc(var(--site-header-offset, 96px) + 8px));
}

/* Logo Carousel Item Styling */
.logo-carousel .item {
    text-align: center;
    width: calc(100% - 12px);
    max-width: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 12px;
    box-sizing: border-box;
}

.logo-carousel .item img {
    max-width: 160px;
    max-height: 70px;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Responsive adjustments for logo carousel items */
@media (max-width: 575px) {
    .logo-carousel .item {
        width: calc(100% - 8px);
        max-width: 120px;
        padding: 8px;
        min-height: 70px;
    }

    .logo-carousel .item img {
        max-width: 100px;
        max-height: 45px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .logo-carousel .item {
        width: calc(100% - 12px);
        max-width: 180px;
        padding: 12px;
        min-height: 80px;
    }

    .logo-carousel .item img {
        max-width: 140px;
        max-height: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .logo-carousel .item {
        width: calc(100% - 14px);
        max-width: 200px;
        padding: 15px;
        min-height: 90px;
    }

    .logo-carousel .item img {
        max-width: 160px;
        max-height: 65px;
    }
}

@media (min-width: 992px) {
    .logo-carousel .item {
        width: calc(100% - 16px);
        max-width: 220px;
        padding: 15px;
        min-height: 100px;
    }

    .logo-carousel .item img {
        max-width: 180px;
        max-height: 75px;
    }
}

/* Logo Carousel Dots Styling */
.logo-carousel + .owl-dots {
    margin-top: 20px;
}

.logo-carousel .owl-dot {
    background: rgba(255, 255, 255, 0.3) !important;
    border: none;
    margin: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.logo-carousel .owl-dot.active {
    background: #ffffff !important;
    transform: scale(1.2);
}

.logo-carousel .owl-dot:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* Banner Swiper Link Styling */
.swiper-slide .swiper-link {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    text-decoration: none;
    cursor: pointer;
}

/* Fix responsive banner image sizing - show full image without cropping */
/* Image ratio: 2000x1121 = 1.784:1 (height is 56.05% of width) */
#section-intro .swiper-inner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Ensure banner section matches image aspect ratio (2000:1121) */
#section-intro {
    position: relative;
    width: 100%;
    min-height: 56.05vw !important; /* 1121/2000 * 100vw = maintains aspect ratio */
}

#section-intro .v-center {
    min-height: 56.05vw !important;
    height: 56.05vw !important;
}

#section-intro .swiper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#section-intro .swiper-slide {
    height: 100%;
}

/* Responsive adjustments - maintain aspect ratio */
@media (max-width: 768px) {
    #section-intro {
        min-height: 56.05vw !important;
    }

    #section-intro .v-center {
        min-height: 56.05vw !important;
        height: 56.05vw !important;
    }

    #section-intro .swiper-inner {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #section-intro {
        min-height: 56.05vw !important;
    }

    #section-intro .v-center {
        min-height: 56.05vw !important;
        height: 56.05vw !important;
    }

    #section-intro .swiper-inner {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (min-width: 1025px) {
    #section-intro {
        min-height: 56.05vw !important;
    }

    #section-intro .v-center {
        min-height: 56.05vw !important;
        height: 56.05vw !important;
    }

    #section-intro .swiper-inner {
        background-size: cover !important;
        background-position: center center !important;
    }
}


#menu-btn {
    display: none;
}


/* Footer sections with vertical dividers */
footer .footer-section {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

footer .footer-section:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
}


/* Responsive: Remove dividers on smaller screens */
@media (max-width: 991px) {
    footer .footer-section {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 30px;
    }

    footer .footer-section::after {
        display: none;
    }
}


/* Center align footer elements in all columns for all display sizes */
footer .container .row > div {
    text-align: center !important;
}

footer .widget {
    text-align: center !important;
}

footer .widget ul {
    text-align: center !important;
    list-style-position: inside;
    padding-left: 0;
}

footer .widget ul li {
    text-align: center !important;
}

footer .widget h5 {
    text-align: center !important;
}

footer .social-icons {
    justify-content: center !important;
    display: flex !important;
}

footer p {
    text-align: center !important;
}

/* Reduce all footer font sizes to half */
footer {
    font-size: 12px !important;
}

footer * {
    font-size: inherit;
}

/* Override specific font sizes that are set in style.css */
footer h5,
.de_light footer h5 {
    font-size: 14px !important; /* 18px / 2 */
}

footer .widget h5 {
    font-size: 14px !important;
}

footer .subfooter {
    font-size: 12px !important;
}

/* RTL/LTL direction for articles and quick link sections based on language (only for > mobile screens) */
/* Mobile keeps centered style (default), only screens > mobile get direction changes */
@media (min-width: 768px) {
    /* Persian (RTL) - for articles and quick links only */
    [dir="rtl"] .footer-quick-links,
    [dir="rtl"] .footer-articles {
        direction: rtl !important;
        text-align: right !important;
    }
    
    [dir="rtl"] .footer-quick-links ul,
    [dir="rtl"] .footer-articles ul {
        text-align: right !important;
        padding-right: 0;
        padding-left: 0;
    }
    
    [dir="rtl"] .footer-quick-links ul li,
    [dir="rtl"] .footer-articles ul li {
        text-align: right !important;
    }
    
    /* English (LTL) - for articles and quick links only */
    [dir="ltr"] .footer-quick-links,
    [dir="ltr"] .footer-articles {
        direction: ltr !important;
        text-align: left !important;
    }
    
    [dir="ltr"] .footer-quick-links ul,
    [dir="ltr"] .footer-articles ul {
        text-align: left !important;
        padding-left: 0;
        padding-right: 0;
    }
    
    [dir="ltr"] .footer-quick-links ul li,
    [dir="ltr"] .footer-articles ul li {
        text-align: left !important;
    }
    
    /* Persian (RTL) - for footer contact items */
    [dir="rtl"] .footer-contact-items {
        direction: rtl !important;
        text-align: right !important;
    }
    
    [dir="rtl"] .footer-contact-items .row {
        direction: rtl !important;
    }
    
    [dir="rtl"] .footer-contact-items .col-6 {
        text-align: right !important;
    }
    
    [dir="rtl"] .footer-contact-items .fw-bold,
    [dir="rtl"] .footer-contact-items a,
    [dir="rtl"] .footer-contact-items .text-white {
        text-align: right !important;
    }
    
    [dir="rtl"] .footer-contact-items .me-2 {
        margin-right: 0 !important;
        margin-left: 0.5rem !important;
    }
    
    /* English (LTL) - for footer contact items */
    [dir="ltr"] .footer-contact-items {
        direction: ltr !important;
        text-align: left !important;
    }
    
    [dir="ltr"] .footer-contact-items .row {
        direction: ltr !important;
    }
    
    [dir="ltr"] .footer-contact-items .col-6 {
        text-align: left !important;
    }
    
    [dir="ltr"] .footer-contact-items .fw-bold,
    [dir="ltr"] .footer-contact-items a,
    [dir="ltr"] .footer-contact-items .text-white {
        text-align: left !important;
    }
    
    [dir="ltr"] .footer-contact-items .me-2 {
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 992px) {
    .homepage-custom-padding {
        padding-top: 50px;
    }
}

.pr-custom-5 {
    padding-right: 75px;
}

/* Advantage section icons - 60x60 size */
.advantage-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}

/* ============================================
   CKEditor Content Styles
   Styles to match CKEditor admin appearance
   ============================================ */

/* Base CKEditor content container */
.ckeditor-content,
.dropcap-text {
    line-height: 1.8;
    color: inherit;
    font-size: inherit;
}

/* Paragraphs */
.ckeditor-content p,
.dropcap-text p {
    margin: 1em 0;
}

.ckeditor-content p:first-child,
.dropcap-text p:first-child {
    margin-top: 0;
}

.ckeditor-content p:last-child,
.dropcap-text p:last-child {
    margin-bottom: 0;
}

/* Article / CKEditor body: first letter matches normal text (no drop cap) */
.dropcap-text::first-letter {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: transparent !important;
    text-transform: none !important;
}

/* Headings */
.ckeditor-content h1,
.ckeditor-content h2,
.ckeditor-content h3,
.ckeditor-content h4,
.ckeditor-content h5,
.ckeditor-content h6,
.dropcap-text h1,
.dropcap-text h2,
.dropcap-text h3,
.dropcap-text h4,
.dropcap-text h5,
.dropcap-text h6 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: bold;
    line-height: 1.3;
}

.ckeditor-content h1:first-child,
.ckeditor-content h2:first-child,
.ckeditor-content h3:first-child,
.ckeditor-content h4:first-child,
.ckeditor-content h5:first-child,
.ckeditor-content h6:first-child,
.dropcap-text h1:first-child,
.dropcap-text h2:first-child,
.dropcap-text h3:first-child,
.dropcap-text h4:first-child,
.dropcap-text h5:first-child,
.dropcap-text h6:first-child {
    margin-top: 0;
}

.ckeditor-content h1,
.dropcap-text h1 {
    font-size: 2.5em;
}

.ckeditor-content h2,
.dropcap-text h2 {
    font-size: 2em;
}

.ckeditor-content h3,
.dropcap-text h3 {
    font-size: 1.75em;
}

.ckeditor-content h4,
.dropcap-text h4 {
    font-size: 1.5em;
}

.ckeditor-content h5,
.dropcap-text h5 {
    font-size: 1.25em;
}

.ckeditor-content h6,
.dropcap-text h6 {
    font-size: 1.1em;
}

/* Images - Match CKEditor styling */
.ckeditor-content img,
.dropcap-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: 4px;
}

/* CKEditor 5 Image Style Classes - These are the classes CKEditor outputs */
/* Side image style - floats to the side with text wrapping */
.ckeditor-content .image-style-side,
.ckeditor-content figure.image-style-side,
.dropcap-text .image-style-side,
.dropcap-text figure.image-style-side {
    float: right;
    width: 50%;
    margin: 1em 0 1em 1.5em;
    max-width: 50%;
}

[dir="rtl"] .ckeditor-content .image-style-side,
[dir="rtl"] .ckeditor-content figure.image-style-side,
[dir="rtl"] .dropcap-text .image-style-side,
[dir="rtl"] .dropcap-text figure.image-style-side {
    float: left;
    margin: 1em 1.5em 1em 0;
}

.ckeditor-content .image-style-side img,
.ckeditor-content figure.image-style-side img,
.dropcap-text .image-style-side img,
.dropcap-text figure.image-style-side img {
    width: 100%;
    margin: 0;
    display: block;
}

/* Align left - floats left */
.ckeditor-content .image-style-align-left,
.ckeditor-content figure.image-style-align-left,
.dropcap-text .image-style-align-left,
.dropcap-text figure.image-style-align-left {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
    max-width: 50%;
}

[dir="rtl"] .ckeditor-content .image-style-align-left,
[dir="rtl"] .ckeditor-content figure.image-style-align-left,
[dir="rtl"] .dropcap-text .image-style-align-left,
[dir="rtl"] .dropcap-text figure.image-style-align-left {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
}

.ckeditor-content .image-style-align-left img,
.ckeditor-content figure.image-style-align-left img,
.dropcap-text .image-style-align-left img,
.dropcap-text figure.image-style-align-left img {
    width: 100%;
    margin: 0;
    display: block;
}

/* Align right - floats right */
.ckeditor-content .image-style-align-right,
.ckeditor-content figure.image-style-align-right,
.dropcap-text .image-style-align-right,
.dropcap-text figure.image-style-align-right {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
    max-width: 50%;
}

[dir="rtl"] .ckeditor-content .image-style-align-right,
[dir="rtl"] .ckeditor-content figure.image-style-align-right,
[dir="rtl"] .dropcap-text .image-style-align-right,
[dir="rtl"] .dropcap-text figure.image-style-align-right {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
}

.ckeditor-content .image-style-align-right img,
.ckeditor-content figure.image-style-align-right img,
.dropcap-text .image-style-align-right img,
.dropcap-text figure.image-style-align-right img {
    width: 100%;
    margin: 0;
    display: block;
}

/* Align center - centered block */
.ckeditor-content .image-style-align-center,
.ckeditor-content figure.image-style-align-center,
.dropcap-text .image-style-align-center,
.dropcap-text figure.image-style-align-center {
    margin: 1.5em auto;
    text-align: center;
    max-width: 100%;
    display: block;
    clear: both;
}

.ckeditor-content .image-style-align-center img,
.ckeditor-content figure.image-style-align-center img,
.dropcap-text .image-style-align-center img,
.dropcap-text figure.image-style-align-center img {
    margin: 0 auto;
    display: block;
}

/* Full width image */
.ckeditor-content .image-style-full,
.ckeditor-content figure.image-style-full,
.dropcap-text .image-style-full,
.dropcap-text figure.image-style-full {
    width: 100%;
    margin: 1.5em 0;
    clear: both;
}

.ckeditor-content .image-style-full img,
.ckeditor-content figure.image-style-full img,
.dropcap-text .image-style-full img,
.dropcap-text figure.image-style-full img {
    width: 100%;
    margin: 0;
    display: block;
}

/* Fallback: Image alignment styles from inline styles (for backwards compatibility) */
.ckeditor-content img[style*="float: left"],
.ckeditor-content img[style*="float:left"],
.dropcap-text img[style*="float: left"],
.dropcap-text img[style*="float:left"] {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
    display: inline-block;
}

[dir="rtl"] .ckeditor-content img[style*="float: left"],
[dir="rtl"] .ckeditor-content img[style*="float:left"],
[dir="rtl"] .dropcap-text img[style*="float: left"],
[dir="rtl"] .dropcap-text img[style*="float:left"] {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
}

.ckeditor-content img[style*="float: right"],
.ckeditor-content img[style*="float:right"],
.dropcap-text img[style*="float: right"],
.dropcap-text img[style*="float:right"] {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
    display: inline-block;
}

[dir="rtl"] .ckeditor-content img[style*="float: right"],
[dir="rtl"] .ckeditor-content img[style*="float:right"],
[dir="rtl"] .dropcap-text img[style*="float: right"],
[dir="rtl"] .dropcap-text img[style*="float:right"] {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
}

.ckeditor-content img[style*="text-align: center"],
.ckeditor-content img[style*="text-align:center"],
.ckeditor-content img[style*="margin-left: auto"],
.ckeditor-content img[style*="margin-left:auto"],
.ckeditor-content img[style*="margin-right: auto"],
.ckeditor-content img[style*="margin-right:auto"],
.dropcap-text img[style*="text-align: center"],
.dropcap-text img[style*="text-align:center"],
.dropcap-text img[style*="margin-left: auto"],
.dropcap-text img[style*="margin-left:auto"],
.dropcap-text img[style*="margin-right: auto"],
.dropcap-text img[style*="margin-right:auto"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Preserve inline width/height styles from CKEditor */
.ckeditor-content img[style*="width"],
.ckeditor-content img[style*="height"],
.dropcap-text img[style*="width"],
.dropcap-text img[style*="height"] {
    /* Inline styles are preserved by |safe filter */
}

/* Figure elements (for images with captions) */
.ckeditor-content figure,
.dropcap-text figure {
    margin: 1.5em auto;
    text-align: center;
    max-width: 100%;
}

/* CKEditor wraps styled images in figure elements */
.ckeditor-content figure.image-style-side,
.ckeditor-content figure.image-style-align-left,
.ckeditor-content figure.image-style-align-right,
.ckeditor-content figure.image-style-align-center,
.ckeditor-content figure.image-style-full,
.dropcap-text figure.image-style-side,
.dropcap-text figure.image-style-align-left,
.dropcap-text figure.image-style-align-right,
.dropcap-text figure.image-style-align-center,
.dropcap-text figure.image-style-full {
    text-align: inherit;
}

.ckeditor-content figure img,
.dropcap-text figure img {
    margin: 0;
    display: block;
    width: 100%;
    height: auto;
}

.ckeditor-content figcaption,
.dropcap-text figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.75em;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* Support for images wrapped in spans (CKEditor sometimes does this) */
.ckeditor-content span.image-style-side,
.ckeditor-content span.image-style-align-left,
.ckeditor-content span.image-style-align-right,
.ckeditor-content span.image-style-align-center,
.ckeditor-content span.image-style-full,
.dropcap-text span.image-style-side,
.dropcap-text span.image-style-align-left,
.dropcap-text span.image-style-align-right,
.dropcap-text span.image-style-align-center,
.dropcap-text span.image-style-full {
    display: block;
}

.ckeditor-content span.image-style-side img,
.ckeditor-content span.image-style-align-left img,
.ckeditor-content span.image-style-align-right img,
.ckeditor-content span.image-style-align-center img,
.ckeditor-content span.image-style-full img,
.dropcap-text span.image-style-side img,
.dropcap-text span.image-style-align-left img,
.dropcap-text span.image-style-align-right img,
.dropcap-text span.image-style-align-center img,
.dropcap-text span.image-style-full img {
    width: 100%;
    margin: 0;
    display: block;
}

/* Tables - Match CKEditor table styling */
.ckeditor-content table,
.dropcap-text table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ckeditor-content table td,
.ckeditor-content table th,
.dropcap-text table td,
.dropcap-text table th {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

[dir="rtl"] .ckeditor-content table td,
[dir="rtl"] .ckeditor-content table th,
[dir="rtl"] .dropcap-text table td,
[dir="rtl"] .dropcap-text table th {
    text-align: right;
}

.ckeditor-content table th,
.dropcap-text table th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

.ckeditor-content table tbody tr:nth-child(even),
.dropcap-text table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.ckeditor-content table tbody tr:hover,
.dropcap-text table tbody tr:hover {
    background-color: #f0f0f0;
}

/* Table caption */
.ckeditor-content table caption,
.dropcap-text table caption {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 0.5em;
    text-align: center;
    font-style: italic;
}

/* Lists */
.ckeditor-content ul,
.ckeditor-content ol,
.dropcap-text ul,
.dropcap-text ol {
    margin: 1em 0;
    padding-left: 2.5em;
}

[dir="rtl"] .ckeditor-content ul,
[dir="rtl"] .ckeditor-content ol,
[dir="rtl"] .dropcap-text ul,
[dir="rtl"] .dropcap-text ol {
    padding-left: 0;
    padding-right: 2.5em;
}

.ckeditor-content ul li,
.ckeditor-content ol li,
.dropcap-text ul li,
.dropcap-text ol li {
    margin: 0.5em 0;
    line-height: 1.6;
}

.ckeditor-content ul ul,
.ckeditor-content ol ol,
.ckeditor-content ul ol,
.ckeditor-content ol ul,
.dropcap-text ul ul,
.dropcap-text ol ol,
.dropcap-text ul ol,
.dropcap-text ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Blockquotes */
.ckeditor-content blockquote,
.dropcap-text blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    padding-left: 2em;
    border-left: 4px solid #ddd;
    background-color: #f9f9f9;
    font-style: italic;
    color: #555;
}

[dir="rtl"] .ckeditor-content blockquote,
[dir="rtl"] .dropcap-text blockquote {
    padding-left: 1.5em;
    padding-right: 2em;
    border-left: none;
    border-right: 4px solid #ddd;
}

.ckeditor-content blockquote p:first-child,
.dropcap-text blockquote p:first-child {
    margin-top: 0;
}

.ckeditor-content blockquote p:last-child,
.dropcap-text blockquote p:last-child {
    margin-bottom: 0;
}

/* Code blocks */
.ckeditor-content code,
.dropcap-text code {
    background-color: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #d63384;
}

.ckeditor-content pre,
.dropcap-text pre {
    background-color: #f5f5f5;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5em 0;
    border: 1px solid #e0e0e0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
}

.ckeditor-content pre code,
.dropcap-text pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Links */
.ckeditor-content a,
.dropcap-text a {
    color: inherit;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.ckeditor-content a:hover,
.dropcap-text a:hover {
    opacity: 0.8;
}

/* Horizontal rules */
.ckeditor-content hr,
.dropcap-text hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 2em 0;
}

/* Text alignment */
.ckeditor-content [style*="text-align: left"],
.ckeditor-content [style*="text-align:left"],
.dropcap-text [style*="text-align: left"],
.dropcap-text [style*="text-align:left"] {
    text-align: left;
}

.ckeditor-content [style*="text-align: center"],
.ckeditor-content [style*="text-align:center"],
.dropcap-text [style*="text-align: center"],
.dropcap-text [style*="text-align:center"] {
    text-align: center;
}

.ckeditor-content [style*="text-align: right"],
.ckeditor-content [style*="text-align:right"],
.dropcap-text [style*="text-align: right"],
.dropcap-text [style*="text-align:right"] {
    text-align: right;
}

[dir="rtl"] .ckeditor-content [style*="text-align: left"],
[dir="rtl"] .ckeditor-content [style*="text-align:left"],
[dir="rtl"] .dropcap-text [style*="text-align: left"],
[dir="rtl"] .dropcap-text [style*="text-align:left"] {
    text-align: right;
}

[dir="rtl"] .ckeditor-content [style*="text-align: right"],
[dir="rtl"] .ckeditor-content [style*="text-align:right"],
[dir="rtl"] .dropcap-text [style*="text-align: right"],
[dir="rtl"] .dropcap-text [style*="text-align:right"] {
    text-align: left;
}

/* Font sizes and colors (preserved from inline styles via |safe) */
.ckeditor-content [style*="font-size"],
.ckeditor-content [style*="color"],
.ckeditor-content [style*="background-color"],
.dropcap-text [style*="font-size"],
.dropcap-text [style*="color"],
.dropcap-text [style*="background-color"] {
    /* Inline styles are preserved by |safe filter */
}

/* Media embeds (videos, iframes) */
.ckeditor-content iframe,
.ckeditor-content video,
.ckeditor-content embed,
.ckeditor-content object,
.dropcap-text iframe,
.dropcap-text video,
.dropcap-text embed,
.dropcap-text object {
    max-width: 100%;
    display: block;
    margin: 1.5em auto;
}

/* Responsive table handling */
@media (max-width: 768px) {
    .ckeditor-content table,
    .dropcap-text table {
        font-size: 0.9em;
    }

    .ckeditor-content table td,
    .ckeditor-content table th,
    .dropcap-text table td,
    .dropcap-text table th {
        padding: 8px 10px;
    }
}

/* Blog single post: header clearance on `#content.no-hero`; keep section top rhythm */
#content.no-hero.no-top section.blog-post-main {
    --blog-top-offset: max(9.5rem, calc(env(safe-area-inset-top, 0px) + 7rem));
    padding-top: var(--blog-top-offset);
}

@media only screen and (max-width: 1199.98px) {
    #content.no-hero.no-top section.blog-post-main {
        /* Total top offset ≈ --blog-top-offset (content margin + section padding). */
        padding-top: max(
            6rem,
            calc(
                var(--blog-top-offset)
                    - max(0px, calc(var(--site-header-offset, 0px) - var(--site-header-fudge)))
            )
        );
    }
}

@media only screen and (min-width: 1200px) {
    #content.no-hero.no-top section.blog-post-main {
        padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.5rem));
    }
}

#content.no-hero.no-top section.blog-post-main .blog-read > h1 {
    scroll-margin-top: max(var(--blog-top-offset), calc(var(--site-header-offset, 96px) + 1rem));
}

/* Subheader responsive min-height */
#subheader {
    min-height: 60vh;
}

@media (min-width: 992px) {
    #subheader {
        min-height: 100vh;
    }
}

/* --------------------------------------------------------------------------
   Cross-browser (Firefox): flex overflow, logical floats, text rendering
   -------------------------------------------------------------------------- */
@supports (-moz-appearance: none) {
    html {
        -moz-text-size-adjust: 100%;
    }
}

#wrapper .de-flex,
#wrapper .de-flex-col,
#wrapper .row {
    min-width: 0;
}

#menu-btn-text {
    float: inline-end;
}

@media (max-width: 1199.98px) {
    /* Base header (base.html): theme uses asymmetric `padding: 5px 0 15px 0` which pushes
       the fixed-bar items above center. Even it out so the toolbar is vertically centered. */
    header.header-mobile {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Base header (base.html): row1 = logo + actions; row2 = full-width #mainmenu when open */
    header.header-mobile .de-flex.sm-pt10 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
        row-gap: 8px;
        column-gap: 10px;
    }

    header.header-mobile .de-flex.sm-pt10 > .de-flex-col:nth-child(1) {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        max-width: min(100%, 60vw);
    }

    header.header-mobile .de-flex.sm-pt10 > .de-flex-col:nth-child(3) {
        order: 2;
        flex: 0 1 auto;
        margin-inline-start: auto;
        width: auto;
        min-width: 0;
    }

    /* Menu column: out of flow until opened (no extra wrap line / row-gap below the bar) */
    header.header-mobile .de-flex.sm-pt10 > .de-flex-col.header-col-mid {
        display: none !important;
        order: 10;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    header.header-mobile.menu-open .de-flex.sm-pt10 > .de-flex-col.header-col-mid {
        display: block !important;
    }

    header.header-mobile .de-flex.sm-pt10 > .de-flex-col {
        display: flex;
        align-items: center;
        align-self: center;
    }

    header.header-mobile .menu_side_area {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px 10px;
        width: auto;
        max-width: 100%;
        margin-inline-start: 0;
        margin-inline-end: 0;
        text-align: inherit;
        position: relative;
        right: auto;
    }

    header.header-mobile .menu_side_area .btn-main {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 38px;
        padding-block: 0;
        padding-inline: 14px;
    }

    header.header-mobile #menu-btn-text {
        float: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 38px;
        padding-block: 0;
        padding-inline: 12px;
        margin-block: 0;
        margin-inline: 0;
        line-height: 1.2;
    }

    /* Tablet/mobile: hide hamburger icon — only #menu-btn-text toggles the menu
       (!important beats theme + jQuery .show() on #menu-btn). */
    header.header-mobile #menu-btn {
        display: none !important;
    }

    header.header-mobile .language-switcher .language-switch-btn,
    header.header-mobile .language-switch-form button.language-switch-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 38px;
        padding-block: 0 !important;
        padding-inline: 12px !important;
        line-height: 1.2;
    }

    header.header-mobile div#logo,
    header.header-mobile #logo {
        display: inline-flex;
        align-items: center;
        line-height: 0;
    }
}

/* Base header — very small phones (≤360px, e.g. 320px): tighten gaps, paddings and font
   so logo + Contact + language + Menu stay on one line (don't wrap). */
@media (max-width: 380px) {
    header.header-mobile .de-flex.sm-pt10 {
        column-gap: 6px;
    }

    header.header-mobile .de-flex.sm-pt10 > .de-flex-col:nth-child(1) {
        max-width: 42vw;
    }

    header.header-mobile .menu_side_area {
        flex-wrap: nowrap;
        gap: 4px;
    }

    header.header-mobile .menu_side_area .btn-main,
    header.header-mobile .menu_side_area .language-switch-btn,
    header.header-mobile .language-switcher .language-switch-btn,
    header.header-mobile .language-switch-form button.language-switch-btn,
    header.header-mobile #menu-btn-text {
        padding-inline: 7px !important;
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   About page — team carousel overlay (center white card + text + icons;
   owl RTL + theme `.d-flex` make Bootstrap utilities unreliable here)
   -------------------------------------------------------------------------- */
#team-members .team-member-overlay-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.75rem 0.75rem;
}

#team-members .team-member-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(100%, 22rem);
    margin-inline: auto;
    box-sizing: border-box;
    text-align: center !important;
    gap: 0.75rem;
}

#team-members .team-member-overlay-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-align: center !important;
}

#team-members .team-member-overlay-text h4,
#team-members .team-member-overlay-text p {
    text-align: center !important;
    width: 100%;
}

#team-members .team-member-overlay-social {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center !important;
    width: 100%;
}

#team-members .team-member-overlay-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    #team-members .team-member-overlay-outer {
        padding: 0 0.5rem 0.5rem;
    }

    #team-members .team-member-overlay-card {
        max-width: 100%;
        padding: 0.875rem 1rem !important;
    }

    #team-members .team-member-overlay-text h4 {
        font-size: 1.05rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #team-members .team-member-overlay-text p {
        font-size: 0.9rem;
    }
}

/* --------------------------------------------------------------------------
   Certifications + lightbox: dynamic viewport (Chrome Android / POCO-class),
   safe areas, stable height so image + caption stay visible
   -------------------------------------------------------------------------- */
.certification-lightbox-overlay {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
}

@supports (height: 100dvh) {
    .certification-lightbox-overlay {
        min-height: 100dvh;
    }
}

.certification-lightbox-overlay .cert-lightbox-stage {
    max-height: min(95vh, 95dvh);
    max-width: min(95vw, 100dvw, 100%);
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.certification-lightbox-overlay img {
    max-width: min(100%, 92vw, 92dvw);
    max-height: min(82vh, 82dvh, 78svh);
    width: auto;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.certification-lightbox-overlay .cert-lightbox-close {
    top: max(1.25rem, env(safe-area-inset-top, 0px));
    right: auto;
    left: auto;
    inset-inline-end: max(1.25rem, env(safe-area-inset-right, 0px));
}

@media (max-width: 480px) {
    .certifications-carousel .item {
        min-height: 0;
        padding: 10px 12px;
    }

    .certifications-carousel .item img {
        max-height: min(52vh, 300px);
    }

    .certification-lightbox-overlay img {
        max-height: min(65vh, 65dvh, 70svh);
    }

    .certification-lightbox-overlay .cert-lightbox-caption {
        font-size: 0.95rem;
        margin-top: 0.75rem;
        max-width: 100%;
        padding-inline: 0.25rem;
    }
}

/* Discourage “Save image” / long-press download (see site_image_protection.html) */
#wrapper img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.certification-lightbox-overlay img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   Header & footer: text color rgb(0, 20, 90) only (no backgrounds)
   -------------------------------------------------------------------------- */
footer,
footer p,
footer h5,
footer a,
footer .menu-item,
footer span.menu-item,
footer .widget,
footer .widget li,
footer .subfooter,
footer .subfooter *,
footer .social-icons a,
footer .social-icons i,
footer .footer-contact-items,
footer .footer-contact-items a,
footer .footer-contact-items .fw-bold,
footer .text-white,
.de_light footer,
.de_light footer a,
.de_light footer p,
.de_light footer h5 {
    color: var(--site-header-footer-text) !important;
}

/* All footer links: hover / focus = white (overrides navy block above) */
footer a:hover,
footer a:focus,
footer a:focus-visible,
footer .footer-contact-items a:hover,
footer .footer-contact-items a:focus,
footer .social-icons a:hover,
footer .social-icons a:focus,
footer .widget a:hover,
footer .widget a:focus,
footer .subfooter a:hover,
footer .subfooter a:focus,
.de_light footer a:hover,
.de_light footer a:focus,
.de_light footer a:focus-visible {
    color: #ffffff !important;
}

header.transparent #mainmenu > li > a,
header.transparent #mainmenu > li > span,
header.transparent #mainmenu a.menu-item,
header.transparent #mainmenu ul a,
header.transparent #mainmenu li.has-child:after,
header.transparent nav a,
header.transparent a.btn-main.btn-line,
header.transparent #menu-btn-text,
header.transparent .language-switcher .language-switch-btn,
header.transparent .language-switch-form button.language-switch-btn,
header.transparent .language-switch-btn {
    color: var(--site-header-footer-text) !important;
}

header.transparent #menu-btn-text:hover,
header.transparent .language-switch-btn:hover,
header.transparent .language-switch-form button.language-switch-btn:hover {
    color: var(--site-header-footer-text) !important;
}

/* Mobile submenu carets: match header text (overrides white chevrons in bar rules above) */
header.transparent.header-mobile #mainmenu > li > span::after,
header.transparent.header-mobile #mainmenu li > ul > li > span::after {
    border-right-color: var(--site-header-footer-text) !important;
    border-bottom-color: var(--site-header-footer-text) !important;
}