/* ============================================================
   MOLEDRO DIGITAL ADVERTISING AGENCY
   SITE.CSS | GLOBAL + HEADER + FOOTER
   ============================================================ */

/* 01. FONTS & VARIABLES */

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

:root {
    --mo-primary: #4db4dc;
    --mo-primary-dark: #2496c3;
    --mo-primary-soft: #eef9fd;
    --mo-pink: #d52c83;
    --mo-yellow: #e8c51d;

    --mo-dark: #17191d;
    --mo-charcoal: #252932;
    --mo-text: #303640;
    --mo-muted: #79818d;
    --mo-white: #ffffff;
    --mo-bg: #f7f8fa;
    --mo-border: #e8eaee;

    --mo-footer-bg: #17191d;
    --mo-footer-muted: #a1a8b3;

    --mo-font: 'Inter', sans-serif;
    --mo-heading-font: 'Manrope', sans-serif;

    --mo-container: 1320px;
    --mo-header-container: 1440px;

    --mo-radius-sm: 8px;
    --mo-radius-md: 14px;
    --mo-radius-lg: 22px;

    --mo-shadow: 0 15px 45px rgba(20, 25, 35, .07);
    --mo-transition: .25s ease;
}

/* 02. GLOBAL RESET */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    background: var(--mo-white);
    color: var(--mo-text);
    font-family: var(--mo-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: var(--mo-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-family: var(--mo-heading-font);
    color: var(--mo-dark);
    font-weight: 800;
    line-height: 1.25;
}

p {
    margin-top: 0;
}

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

a:hover {
    color: var(--mo-primary);
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    font-size: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

:focus-visible {
    outline: 3px solid rgba(77, 180, 220, .5);
    outline-offset: 3px;
}

/* 03. GLOBAL LAYOUT */

.mo-container,
.site-content-container {
    width: 100%;
    max-width: var(--mo-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.mo-section {
    padding: 100px 0;
}

.mo-section-light {
    background: var(--mo-bg);
}

.mo-section-dark {
    background: var(--mo-dark);
    color: var(--mo-white);
}

.mo-section-dark h1,
.mo-section-dark h2,
.mo-section-dark h3,
.mo-section-dark h4 {
    color: var(--mo-white);
}

.mo-accent {
    color: var(--mo-primary);
}

.mo-text-muted {
    color: var(--mo-muted);
}

/* 04. GLOBAL BUTTONS */

.mo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--mo-radius-sm);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transition:
            background var(--mo-transition),
            color var(--mo-transition),
            border-color var(--mo-transition),
            transform var(--mo-transition);
}

.mo-btn-primary {
    background: var(--mo-dark);
    color: #fff;
}

.mo-btn-primary:hover {
    background: var(--mo-primary);
    color: #fff;
    transform: translateY(-2px);
}

.mo-btn-outline {
    background: transparent;
    color: var(--mo-dark);
    border-color: var(--mo-border);
}

.mo-btn-outline:hover {
    background: var(--mo-dark);
    border-color: var(--mo-dark);
    color: #fff;
}

.mo-btn-accent {
    background: var(--mo-primary);
    color: #fff;
}

.mo-btn-accent:hover {
    background: var(--mo-primary-dark);
    color: #fff;
}

/* ============================================================
   05. HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid var(--mo-border);
    transition:
            box-shadow .25s ease,
            background .25s ease;
}

.site-header.is-sticky {
    box-shadow: 0 10px 35px rgba(15, 20, 30, .075);
}

.site-header .site-header-container {
    width: 100%;
    max-width: var(--mo-header-container);
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.site-header .site-navbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    min-height: 90px;
    padding: 10px 0;
}

.site-header.is-sticky .site-navbar {
    min-height: 76px;
}

/* HEADER LOGO */

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.site-header .site-logo-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 205px;
    max-height: 60px;
    object-fit: contain;
}

.site-header .site-logo-fallback {
    font-family: var(--mo-heading-font);
    font-size: 24px;
    font-weight: 800;
    color: var(--mo-dark);
}

/* HEADER COLLAPSE */

.site-header #siteMainMenu {
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.site-header .site-menu-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

/* MAIN NAVIGATION */

.site-header .site-menu-area .navbar-nav {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .site-menu-area .nav-item {
    position: relative;
}

.site-header .site-menu-area .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 12px;
    color: #343943;
    font-family: var(--mo-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: color var(--mo-transition);
}

.site-header .site-menu-area .nav-link:hover,
.site-header .site-menu-area .nav-link.active,
.site-header .site-menu-area .nav-item.active > .nav-link,
.site-header .site-menu-area .nav-link[aria-current="page"] {
    color: var(--mo-primary);
}

.site-header .site-menu-area .dropdown-toggle::after {
    margin-left: 3px;
    vertical-align: middle;
}

/* MENU DROPDOWNS */

.site-header .site-menu-area .dropdown-menu {
    min-width: 220px;
    padding: 9px;
    margin-top: 8px;
    border: 1px solid var(--mo-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(17, 24, 39, .1);
}

.site-header .site-menu-area .dropdown-item {
    display: block;
    padding: 11px 13px;
    border-radius: 8px;
    color: var(--mo-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    transition:
            background var(--mo-transition),
            color var(--mo-transition);
}

.site-header .site-menu-area .dropdown-item:hover,
.site-header .site-menu-area .dropdown-item:focus,
.site-header .site-menu-area .dropdown-item.active {
    background: var(--mo-primary-soft);
    color: var(--mo-primary-dark);
}

/* DESKTOP HOVER DROPDOWNS */

@media (min-width: 992px) {
    .site-header .site-menu-area .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    .site-header .site-menu-area .dropdown-menu .dropdown {
        position: relative;
    }

    .site-header .site-menu-area .dropdown-menu .dropdown > .dropdown-menu {
        top: -9px;
        left: 100%;
        margin-top: 0;
    }

    .site-header .site-menu-area .dropdown-menu .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* HEADER RIGHT ACTIONS */

.site-header .site-navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 12px;
    margin-left: auto;
}

.site-header .site-navbar-action,
.site-header .site-mobile-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mo-dark);
    font-size: 19px;
    transition:
            background var(--mo-transition),
            color var(--mo-transition);
}

.site-header .site-navbar-action:hover,
.site-header .site-mobile-search-button:hover {
    background: var(--mo-primary-soft);
    color: var(--mo-primary-dark);
}

/* LANGUAGE SELECTOR */

.site-header .site-language {
    position: relative;
}

.site-header .site-language-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-dark);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.site-header .site-language-button:hover {
    background: var(--mo-primary-soft);
}

.site-header .site-language-button::after {
    display: none;
}

.site-header .language-arrow {
    font-size: 10px;
    color: var(--mo-muted);
}

.site-header .site-language-dropdown {
    min-width: 185px;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid var(--mo-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--mo-shadow);
}

.site-header .site-language-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 7px;
    color: var(--mo-text);
    font-size: 13px;
}

.site-header .site-language-dropdown .dropdown-item small {
    font-size: 11px;
    color: var(--mo-muted);
}

.site-header .site-language-dropdown .dropdown-item:hover {
    background: var(--mo-primary-soft);
    color: var(--mo-primary-dark);
}

.site-header .site-language-dropdown .dropdown-item.active {
    background: var(--mo-primary);
    color: #fff;
}

.site-header .site-language-dropdown .dropdown-item.active small {
    color: #fff;
}

/* OFFER BUTTON */

.site-header .site-offer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 13px 21px;
    border: 1px solid var(--mo-dark);
    border-radius: 9px;
    background: var(--mo-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition:
            background var(--mo-transition),
            border-color var(--mo-transition),
            transform var(--mo-transition);
}

.site-header .site-offer-button:hover {
    background: var(--mo-primary);
    border-color: var(--mo-primary);
    color: #fff;
    transform: translateY(-2px);
}

.site-header .site-offer-button i {
    font-size: 16px;
}

/* MEMBER & CART */

.site-header .site-member-button,
.site-header .site-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    color: var(--mo-dark);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.site-header .site-member-button:hover,
.site-header .site-cart-button:hover {
    color: var(--mo-primary);
}

.site-header .site-member-button i,
.site-header .site-cart-button i {
    font-size: 18px;
}

.site-header .site-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border-radius: 30px;
    background: var(--mo-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* MOBILE ACTIONS */

.site-header .site-mobile-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

/* HEADER SEARCH */

.site-header .site-header-search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1051;
    width: 100%;
    padding: 22px 0;
    background: #fff;
    border-top: 1px solid var(--mo-border);
    box-shadow: 0 20px 35px rgba(17, 24, 39, .09);
}

.site-header .site-header-search.is-open {
    display: block;
}

.site-header .site-header-search-form {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.site-header .site-header-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mo-primary);
    font-size: 22px;
}

.site-header .site-header-search-form input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mo-dark);
    font-size: 15px;
}

.site-header .site-header-search-form input::placeholder {
    color: #9aa1ac;
}

.site-header .site-header-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 24px;
    border: 0;
    border-radius: 9px;
    background: var(--mo-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.site-header .site-header-search-submit:hover {
    background: var(--mo-primary);
}

.site-header .site-header-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mo-dark);
    font-size: 17px;
}

.site-header .site-header-search-close:hover {
    background: #f2f3f5;
}

/* ============================================================
   06. FOOTER
   ============================================================ */

.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--mo-footer-bg);
    color: var(--mo-footer-muted);
    font-family: var(--mo-font);
}

.site-footer a {
    text-decoration: none;
}

/* NEWSLETTER */

.site-footer .footer-newsletter {
    position: relative;
    padding: 65px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer .footer-newsletter::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(77, 180, 220, .12),
            transparent 70%
    );
    pointer-events: none;
}

.site-footer .footer-newsletter-content {
    position: relative;
    z-index: 1;
    max-width: 550px;
}

.site-footer .footer-newsletter-content h2 {
    margin: 0 0 15px;
    color: #fff;
    font-family: var(--mo-heading-font);
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.8px;
}

.site-footer .footer-newsletter-content p {
    max-width: 490px;
    margin: 0;
    color: var(--mo-footer-muted);
    font-size: 14px;
    line-height: 1.85;
}

/* NEWSLETTER FORM */

.site-footer .footer-newsletter-form {
    position: relative;
    z-index: 1;
    width: 100%;
}

.site-footer .footer-newsletter-input {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 7px 7px 7px 21px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    transition: border-color var(--mo-transition);
}

.site-footer .footer-newsletter-input:focus-within {
    border-color: var(--mo-primary);
}

.site-footer .footer-newsletter-input > i {
    flex-shrink: 0;
    color: var(--mo-primary);
    font-size: 20px;
}

.site-footer .footer-newsletter-input input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.site-footer .footer-newsletter-input input::placeholder {
    color: #a3aab5;
}

.site-footer .footer-newsletter-input button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    min-height: 52px;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--mo-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition:
            background var(--mo-transition),
            transform var(--mo-transition);
}

.site-footer .footer-newsletter-input button:hover {
    background: var(--mo-primary-dark);
}

.site-footer .footer-newsletter-form > small {
    display: block;
    margin-top: 13px;
    color: #929aa6;
    font-size: 11px;
    line-height: 1.7;
}

/* NEWSLETTER ALERTS */

.site-footer .footer-newsletter-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.6;
}

.site-footer .footer-newsletter-alert.success {
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .2);
    color: #86efac;
}

.site-footer .footer-newsletter-alert.error {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .2);
    color: #fca5a5;
}

/* MAIN FOOTER */

.site-footer .site-footer-main {
    padding: 85px 0 75px;
}

.site-footer .footer-brand {
    max-width: 350px;
}

.site-footer .footer-logo-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 25px;
}

.site-footer .footer-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 205px;
    max-height: 65px;
    object-fit: contain;
}

.site-footer .footer-logo-text {
    display: block;
    margin-bottom: 25px;
    color: #fff;
    font-family: var(--mo-heading-font);
    font-size: 25px;
    font-weight: 800;
}

.site-footer .footer-description {
    margin: 0;
    color: var(--mo-footer-muted);
    font-size: 13px;
    line-height: 2;
}

/* FOOTER COLUMNS */

.site-footer .footer-column h4 {
    margin: 0 0 27px;
    color: #fff;
    font-family: var(--mo-heading-font);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.site-footer .footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .footer-column ul li {
    margin: 0;
    padding: 0;
}

.site-footer .footer-column ul a {
    display: inline-block;
    color: var(--mo-footer-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    transition:
            color var(--mo-transition),
            transform var(--mo-transition);
}

.site-footer .footer-column ul a:hover {
    color: var(--mo-primary);
    transform: translateX(4px);
}

/* FOOTER CONTACT */

.site-footer .footer-contact-label {
    display: block;
    margin-bottom: 27px;
    color: #fff;
    font-family: var(--mo-heading-font);
    font-size: 15px;
    font-weight: 800;
}

.site-footer .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
}

.site-footer .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    color: var(--mo-footer-muted);
}

.site-footer a.footer-contact-item:hover {
    color: #fff;
}

.site-footer .footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .055);
    color: var(--mo-primary);
    font-size: 17px;
}

.site-footer .footer-contact-item > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 2px;
}

.site-footer .footer-contact-item small {
    display: block;
    margin-bottom: 3px;
    color: #8c95a2;
    font-size: 11px;
    font-weight: 500;
}

.site-footer .footer-contact-item strong {
    display: block;
    color: #e6e9ee;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* FOOTER BOTTOM */

.site-footer .site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer .footer-copyright {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #929aa6;
    font-size: 12px;
    line-height: 1.7;
}

.site-footer .footer-copyright span {
    color: #929aa6;
}

.site-footer .footer-bottom-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.site-footer .footer-bottom-links a {
    color: #a1a8b3;
    font-size: 12px;
    font-weight: 500;
}

.site-footer .footer-bottom-links a:hover {
    color: var(--mo-primary);
}

.site-footer .footer-bottom-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #a1a8b3;
    font-size: 11px;
    font-weight: 600;
}

.site-footer .footer-bottom-brand i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mo-primary);
}

/* ============================================================
   07. RESPONSIVE | LARGE TABLETS
   ============================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .site-navbar {
        gap: 14px;
    }

    .site-header .site-logo-image {
        max-width: 160px;
    }

    .site-header .site-menu-area .nav-link {
        padding: 10px 7px;
        font-size: 12px;
    }

    .site-header .site-navbar-actions {
        gap: 6px;
    }

    .site-header .site-offer-button {
        padding: 12px 14px;
    }

    .site-footer .site-footer-main {
        padding: 70px 0;
    }
}

/* ============================================================
   08. RESPONSIVE | TABLET & MOBILE
   ============================================================ */

@media (max-width: 991.98px) {
    .mo-section {
        padding: 70px 0;
    }

    .site-header .site-header-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header .site-navbar,
    .site-header.is-sticky .site-navbar {
        min-height: 76px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
    }

    .site-header .site-logo-image {
        max-width: 175px;
        max-height: 50px;
    }

    .site-header .site-mobile-actions {
        display: flex;
        margin-left: auto;
    }

    .site-header .site-mobile-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--mo-border);
        border-radius: 9px;
        background: #fff;
        color: var(--mo-dark);
        font-size: 25px;
        box-shadow: none;
    }

    .site-header .site-mobile-button:focus {
        box-shadow: none;
    }

    .site-header #siteMainMenu {
        flex-basis: 100%;
        flex-grow: 1;
        width: 100%;
        min-width: 0;
        padding: 16px 0 22px;
        border-top: 1px solid var(--mo-border);
    }

    .site-header .site-menu-area {
        display: block;
        width: 100%;
    }

    .site-header .site-menu-area .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
    }

    .site-header .site-menu-area .nav-item {
        width: 100%;
    }

    .site-header .site-menu-area .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 13px 9px;
        font-size: 14px;
        white-space: normal;
    }

    .site-header .site-menu-area .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 7px;
        border: 1px solid var(--mo-border);
        border-radius: 9px;
        box-shadow: none;
    }

    .site-header .site-menu-area .dropdown-item {
        padding: 11px 12px;
    }

    .site-header .site-navbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 14px;
        width: 100%;
        margin: 18px 0 0;
        padding-top: 18px;
        border-top: 1px solid var(--mo-border);
    }

    .site-header .site-navbar-action {
        display: none;
    }

    .site-header .site-header-search {
        padding: 15px 0;
    }

    .site-header .site-header-search-form {
        gap: 8px;
    }

    .site-header .site-header-search-submit {
        padding: 12px 15px;
    }

    .site-footer .footer-newsletter {
        padding: 55px 0;
    }

    .site-footer .site-footer-main {
        padding: 65px 0;
    }

    .site-footer .footer-brand {
        max-width: 500px;
    }

    .site-footer .footer-newsletter-content {
        max-width: 600px;
    }

    .site-footer .footer-newsletter-content h2 {
        font-size: 30px;
    }

    .site-footer .site-footer-bottom {
        justify-content: flex-start;
    }
}

/* ============================================================
   09. RESPONSIVE | SMALL MOBILE
   ============================================================ */

@media (max-width: 575.98px) {
    .mo-container,
    .site-content-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mo-section {
        padding: 55px 0;
    }

    .site-header .site-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-header .site-logo-image {
        max-width: 145px;
        max-height: 45px;
    }

    .site-header .site-mobile-actions {
        gap: 4px;
    }

    .site-header .site-mobile-search-button,
    .site-header .site-mobile-button {
        width: 40px;
        height: 40px;
    }

    .site-header .site-header-search-icon {
        display: none;
    }

    .site-header .site-header-search-form input {
        padding: 0 4px;
        font-size: 13px;
    }

    .site-header .site-header-search-submit {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .site-header .site-header-search-close {
        width: 34px;
        height: 40px;
    }

    .site-footer .footer-newsletter {
        padding: 48px 0;
    }

    .site-footer .footer-newsletter-content h2 {
        font-size: 27px;
    }

    .site-footer .footer-newsletter-content p {
        font-size: 13px;
    }

    .site-footer .footer-newsletter-input {
        gap: 8px;
        min-height: 60px;
        padding: 6px 6px 6px 12px;
    }

    .site-footer .footer-newsletter-input > i {
        font-size: 17px;
    }

    .site-footer .footer-newsletter-input input {
        font-size: 12px;
    }

    .site-footer .footer-newsletter-input button {
        gap: 6px;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .site-footer .site-footer-main {
        padding: 55px 0;
    }

    .site-footer .footer-logo {
        max-width: 180px;
        max-height: 55px;
    }

    .site-footer .footer-column h4,
    .site-footer .footer-contact-label {
        margin-bottom: 18px;
    }

    .site-footer .footer-column ul {
        gap: 12px;
    }

    .site-footer .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 24px 0;
    }

    .site-footer .footer-bottom-links {
        gap: 18px;
    }
}

/* ============================================================
   10. ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =====================================================
   MOLEDRO HEADER FINAL FIX
   Desktop Navigation + Dropdown + Mobile
===================================================== */

@media (min-width: 992px) {

    .site-header .site-navbar {
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        min-height: 88px;
        padding: 12px 0;
    }

    .site-header .site-logo {
        flex: 0 0 auto;
        margin: 0;
    }

    .site-header .site-logo-image {
        max-width: 190px;
        max-height: 60px;
        object-fit: contain;
    }

    .site-header #siteMainMenu {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-header .site-menu-area {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Main menu */

    .site-header .site-menu-area > ul,
    .site-header .site-menu-area > nav > ul,
    .site-header .site-menu-area .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-header .site-menu-area li {
        position: relative;
        list-style: none;
    }

    .site-header .site-menu-area > ul > li,
    .site-header .site-menu-area .navbar-nav > li {
        flex-shrink: 0;
    }

    .site-header .site-menu-area > ul > li > a,
    .site-header .site-menu-area .navbar-nav > li > a,
    .site-header .site-menu-area .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 13px 11px;
        color: #343943;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap !important;
    }

    .site-header .site-menu-area a:hover {
        color: #4db4dc;
    }

    /* All nested dropdown lists */

    .site-header .site-menu-area li > ul,
    .site-header .site-menu-area .dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        z-index: 1100;
        width: max-content;
        min-width: 220px;
        max-width: 300px;
        margin: 0;
        padding: 9px;
        list-style: none;
        border: 1px solid #e8eaee;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 18px 45px rgba(0,0,0,.11);
        transform: none !important;
        inset: auto auto auto 0;
    }

    .site-header .site-menu-area li:hover > ul,
    .site-header .site-menu-area li:focus-within > ul,
    .site-header .site-menu-area li > ul.show,
    .site-header .site-menu-area .dropdown-menu.show {
        display: block !important;
    }

    .site-header .site-menu-area li > ul > li {
        display: block;
        width: 100%;
    }

    .site-header .site-menu-area li > ul > li > a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 11px 13px;
        border-radius: 7px;
        color: #343943;
        font-size: 13px;
        font-weight: 500;
        white-space: normal;
    }

    .site-header .site-menu-area li > ul > li > a:hover {
        background: #eef9fd;
        color: #2496c3;
    }

    /* Second level dropdown */

    .site-header .site-menu-area li > ul > li > ul {
        top: 0;
        left: 100%;
    }

    /* Right actions */

    .site-header .site-navbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        gap: 14px;
        margin-left: 18px;
    }

    .site-header .site-mobile-actions {
        display: none !important;
    }
}

/* Laptop */

@media (min-width: 992px) and (max-width: 1250px) {

    .site-header .site-navbar {
        gap: 15px;
    }

    .site-header .site-logo-image {
        max-width: 150px;
    }

    .site-header .site-menu-area > ul > li > a,
    .site-header .site-menu-area .navbar-nav > li > a {
        padding: 10px 7px;
        font-size: 12px;
    }

    .site-header .site-navbar-actions {
        gap: 7px;
        margin-left: 8px;
    }

    .site-header .site-offer-button {
        padding: 12px 14px;
    }
}

/* Mobile */

@media (max-width: 991.98px) {

    .site-header .site-navbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .site-header .site-mobile-actions {
        display: flex;
        margin-left: auto;
    }

    .site-header #siteMainMenu:not(.show):not(.collapsing) {
        display: none !important;
    }

    .site-header #siteMainMenu.show {
        display: block !important;
    }

    .site-header .site-menu-area,
    .site-header .site-menu-area > ul,
    .site-header .site-menu-area .navbar-nav {
        display: block;
        width: 100%;
    }

    .site-header .site-menu-area ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-header .site-menu-area li {
        position: relative;
    }

    .site-header .site-menu-area li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    .site-header .site-menu-area li > ul {
        display: none;
        position: static !important;
        width: 100%;
        margin: 0 0 8px;
        padding: 6px 10px;
        background: #f7f8fa;
        border: 0;
        border-radius: 9px;
        box-shadow: none;
        transform: none !important;
    }

    .site-header .site-menu-area li > ul.show,
    .site-header .site-menu-area li:focus-within > ul {
        display: block;
    }

    .site-header .site-navbar-actions {
        width: 100%;
        margin: 16px 0 0;
        padding-top: 16px;
        border-top: 1px solid #e8eaee;
    }
}

/* =====================================================
   MOLEDRO DIGITAL AGENCY
   FOOTER FINAL DESIGN
===================================================== */

.moledro-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #17191d;
    color: #a4aab4;
}

.moledro-footer .site-content-container {
    max-width: 1380px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* NEWSLETTER */

.moledro-footer .footer-newsletter {
    position: relative;
    padding: 75px 0;
    background: #20232a;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.moledro-footer .footer-newsletter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(
            to bottom,
            #4db4dc 0%,
            #d52c83 55%,
            #e8c51d 100%
    );
}

.moledro-footer .footer-newsletter-content {
    max-width: 560px;
}

.moledro-footer .footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #4db4dc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.moledro-footer .footer-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4db4dc;
}

.moledro-footer .footer-newsletter-content h2 {
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

.moledro-footer .footer-newsletter-content h2 span {
    color: #4db4dc;
}

.moledro-footer .footer-newsletter-content p {
    max-width: 460px;
    margin: 0;
    color: #a4aab4;
    font-size: 14px;
    line-height: 1.9;
}

.moledro-footer .footer-newsletter-box {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
}

.moledro-footer .footer-newsletter-form {
    width: 100%;
}

.moledro-footer .footer-newsletter-input {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 7px 7px 7px 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #2b2f38;
    transition: border-color .25s ease;
}

.moledro-footer .footer-newsletter-input:focus-within {
    border-color: #4db4dc;
}

.moledro-footer .footer-newsletter-input > i {
    flex-shrink: 0;
    color: #4db4dc;
    font-size: 20px;
}

.moledro-footer .footer-newsletter-input input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.moledro-footer .footer-newsletter-input input::placeholder {
    color: #a4aab4;
}

.moledro-footer .footer-newsletter-input button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 13px 22px;
    border: 0;
    border-radius: 8px;
    background: #4db4dc;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s ease;
}

.moledro-footer .footer-newsletter-input button:hover {
    background: #2496c3;
}

.moledro-footer .footer-newsletter-form > small {
    display: block;
    margin-top: 13px;
    color: #8e96a3;
    font-size: 11px;
    line-height: 1.7;
}

/* NEWSLETTER MESSAGES */

.moledro-footer .footer-newsletter-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 13px;
}

.moledro-footer .footer-newsletter-alert.success {
    background: rgba(34,197,94,.12);
    color: #86efac;
}

.moledro-footer .footer-newsletter-alert.error {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
}

/* MAIN FOOTER */

.moledro-footer .site-footer-main {
    padding: 85px 0 80px;
    background: #17191d;
}

.moledro-footer .footer-brand {
    max-width: 350px;
}

.moledro-footer .footer-logo-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 27px;
}

.moledro-footer .footer-logo {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 65px;
    height: auto;
    object-fit: contain;
}

.moledro-footer .footer-logo-text {
    display: inline-block;
    margin-bottom: 25px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.moledro-footer .footer-description {
    margin: 0;
    color: #a4aab4;
    font-size: 13px;
    line-height: 2;
}

.moledro-footer .footer-brand-signature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 27px;
    color: #777f8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.moledro-footer .signature-line {
    width: 30px;
    height: 2px;
    background: #4db4dc;
}

/* FOOTER NAVIGATION */

.moledro-footer .footer-column h4,
.moledro-footer .footer-contact-label {
    display: block;
    margin: 0 0 28px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.moledro-footer .footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.moledro-footer .footer-column ul li {
    margin: 0;
    padding: 0;
}

.moledro-footer .footer-column ul a {
    display: inline-block;
    color: #a4aab4;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    transition:
            color .25s ease,
            transform .25s ease;
}

.moledro-footer .footer-column ul a:hover {
    color: #4db4dc;
    transform: translateX(4px);
}

/* CONTACT */

.moledro-footer .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
}

.moledro-footer .footer-contact-label {
    margin-bottom: 8px;
}

.moledro-footer .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    color: #a4aab4;
}

.moledro-footer .footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: #242830;
    color: #4db4dc;
    font-size: 17px;
}

.moledro-footer .footer-contact-item > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.moledro-footer .footer-contact-item small {
    margin-bottom: 4px;
    color: #858e9b;
    font-size: 11px;
}

.moledro-footer .footer-contact-item strong {
    color: #e7e9ed;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.moledro-footer a.footer-contact-item:hover strong {
    color: #4db4dc;
}

/* FOOTER BOTTOM */

.moledro-footer .site-footer-bottom-wrapper {
    border-top: 1px solid rgba(255,255,255,.09);
    background: #131519;
}

.moledro-footer .site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px 0;
    border: 0;
}

.moledro-footer .footer-copyright {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #929aa6;
    font-size: 12px;
    line-height: 1.7;
}

.moledro-footer .footer-bottom-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.moledro-footer .footer-bottom-links a {
    color: #a4aab4;
    font-size: 12px;
    font-weight: 500;
}

.moledro-footer .footer-bottom-links a:hover {
    color: #4db4dc;
}

.moledro-footer .footer-bottom-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #929aa6;
    font-size: 11px;
    font-weight: 600;
}

.moledro-footer .footer-bottom-brand i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4db4dc;
}

/* RESPONSIVE */

@media (max-width: 991.98px) {

    .moledro-footer .footer-newsletter {
        padding: 60px 0;
    }

    .moledro-footer .footer-newsletter-box {
        max-width: 100%;
        margin-left: 0;
    }

    .moledro-footer .site-footer-main {
        padding: 65px 0;
    }

    .moledro-footer .footer-brand {
        max-width: 500px;
    }

    .moledro-footer .site-footer-bottom {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {

    .moledro-footer .site-content-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .moledro-footer .footer-newsletter {
        padding: 50px 0;
    }

    .moledro-footer .footer-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .moledro-footer .footer-newsletter-content h2 {
        font-size: 29px;
    }

    .moledro-footer .footer-newsletter-content p {
        font-size: 13px;
    }

    .moledro-footer .footer-newsletter-input {
        gap: 8px;
        padding: 6px 6px 6px 12px;
        min-height: 60px;
    }

    .moledro-footer .footer-newsletter-input > i {
        font-size: 17px;
    }

    .moledro-footer .footer-newsletter-input input {
        font-size: 12px;
    }

    .moledro-footer .footer-newsletter-input button {
        gap: 6px;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .moledro-footer .site-footer-main {
        padding: 55px 0;
    }

    .moledro-footer .footer-logo {
        max-width: 185px;
    }

    .moledro-footer .footer-column h4,
    .moledro-footer .footer-contact-label {
        margin-bottom: 19px;
    }
    /* =====================================================
       MOLEDRO DIGITAL AGENCY
       POPUP / CAMPAIGN MODAL
    ===================================================== */

    #ert-popup-root {
        position: relative;
        z-index: 99999;
    }

    #ert-popup-root .ert-popup[hidden] {
        display: none !important;
    }

    #ert-popup-root .ert-popup {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(12, 15, 22, .78);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    /* PANEL */

    #ert-popup-root .ert-popup-panel {
        position: relative;
        width: min(100%, 620px);
        max-height: min(90vh, 850px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 25px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 20px;
        background: #fff;
        color: #303640;
        text-align: center;
        box-shadow: 0 30px 100px rgba(0,0,0,.25);
        scrollbar-width: thin;
        scrollbar-color: #d7dce3 transparent;
    }

    /* CLOSE BUTTON */

    #ert-popup-root .ert-popup-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #e8eaee;
        border-radius: 50%;
        background: rgba(255,255,255,.96);
        color: #17191d;
        font-size: 26px;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,.08);
        transition:
                background .25s ease,
                color .25s ease,
                transform .25s ease;
    }

    #ert-popup-root .ert-popup-close:hover {
        background: #17191d;
        color: #fff;
        transform: rotate(90deg);
    }

    /* MEDIA */

    #ert-popup-root .ert-popup-panel img,
    #ert-popup-root .ert-popup-panel video {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 55vh;
        height: auto;
        margin: 0 auto 22px;
        border-radius: 12px;
        object-fit: contain;
    }

    #ert-popup-root .ert-popup-panel video {
        width: 100%;
        background: #111;
    }

    #ert-popup-root .ert-popup-youtube {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 0 auto 22px;
        border: 0;
        border-radius: 12px;
        background: #111;
    }

    /* TITLE */

    #ert-popup-root .ert-popup-panel h2 {
        margin: 12px 0 13px;
        color: #17191d;
        font-family: 'Manrope', sans-serif;
        font-size: clamp(22px, 3vw, 29px);
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: -.6px;
    }

    /* DESCRIPTION */

    #ert-popup-root .ert-popup-panel p {
        max-width: 510px;
        margin: 0 auto 18px;
        color: #747b87;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.85;
        overflow-wrap: anywhere;
    }

    /* ACTION BUTTON */

    #ert-popup-root .ert-popup-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin-top: 8px;
        padding: 13px 28px;
        border: 1px solid #17191d;
        border-radius: 9px;
        background: #17191d;
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        transition:
                background .25s ease,
                border-color .25s ease,
                transform .25s ease;
    }

    #ert-popup-root .ert-popup-action:hover {
        background: #4db4dc;
        border-color: #4db4dc;
        color: #fff;
        transform: translateY(-2px);
    }

    /* FOCUS */

    #ert-popup-root .ert-popup-close:focus-visible,
    #ert-popup-root .ert-popup-action:focus-visible {
        outline: 3px solid rgba(77,180,220,.5);
        outline-offset: 3px;
    }

    /* TABLET */

    @media (max-width: 991.98px) {
        #ert-popup-root .ert-popup {
            padding: 18px;
        }

        #ert-popup-root .ert-popup-panel {
            max-height: 90dvh;
            padding: 22px;
            border-radius: 17px;
        }
    }

    /* MOBILE */

    @media (max-width: 575.98px) {
        #ert-popup-root .ert-popup {
            padding: 12px;
        }

        #ert-popup-root .ert-popup-panel {
            width: 100%;
            max-height: 92dvh;
            padding: 16px;
            border-radius: 15px;
        }

        #ert-popup-root .ert-popup-close {
            top: 8px;
            right: 8px;
            width: 36px;
            height: 36px;
            font-size: 23px;
        }

        #ert-popup-root .ert-popup-panel img,
        #ert-popup-root .ert-popup-panel video {
            max-height: 50dvh;
            margin-bottom: 16px;
            border-radius: 9px;
        }

        #ert-popup-root .ert-popup-youtube {
            margin-bottom: 16px;
            border-radius: 9px;
        }

        #ert-popup-root .ert-popup-panel h2 {
            margin: 10px 0;
            font-size: 22px;
        }

        #ert-popup-root .ert-popup-panel p {
            font-size: 13px;
            line-height: 1.75;
        }

        #ert-popup-root .ert-popup-action {
            width: 100%;
            min-height: 46px;
            padding: 12px 18px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #ert-popup-root .ert-popup-close,
        #ert-popup-root .ert-popup-action {
            transition: none;
        }
    }

    /* ============================================================
       MOLEDRO DIGITAL AGENCY
       QUICK QUOTE MODAL - FINAL CSS
    ============================================================ */

    .moledro-quote-modal {
        --qq-primary: #4db4dc;
        --qq-primary-dark: #2496c3;
        --qq-pink: #d52c83;
        --qq-yellow: #e8c51d;
        --qq-dark: #17191d;
        --qq-text: #303640;
        --qq-muted: #79818d;
        --qq-border: #e8eaee;
        --qq-bg: #f7f8fa;
    }

    /* MODAL DIALOG */

    .moledro-quote-modal .modal-dialog {
        width: calc(100% - 24px);
        max-width: 660px;
        margin-left: auto;
        margin-right: auto;
    }

    .moledro-quote-modal .modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 30px 100px rgba(0, 0, 0, .22);
    }

    .moledro-quote-modal .modal-dialog-scrollable .modal-content {
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* MODAL HEADER */

    .moledro-quote-modal .qq-modal-header {
        position: relative;
        flex-shrink: 0;
        padding: 35px 38px 30px;
        background: #17191d;
        color: #fff;
    }

    .moledro-quote-modal .qq-modal-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 38px;
        width: 55px;
        height: 3px;
        border-radius: 5px;
        background: linear-gradient(
                90deg,
                #4db4dc 0%,
                #d52c83 55%,
                #e8c51d 100%
        );
    }

    .moledro-quote-modal .qq-modal-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 17px;
        padding-right: 45px;
        color: #aeb7c4;
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.7px;
    }

    .moledro-quote-modal .qq-kicker-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #4db4dc;
    }

    .moledro-quote-modal .qq-modal-header h2 {
        max-width: 490px;
        margin: 0 0 13px;
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: clamp(25px, 3vw, 33px);
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.8px;
    }

    .moledro-quote-modal .qq-modal-header h2 span {
        display: block;
        color: #4db4dc;
    }

    .moledro-quote-modal .qq-modal-header p {
        max-width: 500px;
        margin: 0;
        color: #b0b8c4;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        line-height: 1.85;
    }

    .moledro-quote-modal .qq-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 9px;
        background: rgba(255,255,255,.08);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        transition:
                background .25s ease,
                transform .25s ease;
    }

    .moledro-quote-modal .qq-modal-close:hover {
        background: rgba(255,255,255,.18);
        transform: rotate(90deg);
    }

    /* MODAL BODY */

    .moledro-quote-modal .qq-modal-body {
        min-height: 0;
        padding: 32px 38px 38px;
        overflow-y: auto;
        background: #fff;
        scrollbar-width: thin;
        scrollbar-color: #dce1e7 transparent;
    }

    /* SELECTED SERVICE */

    .moledro-quote-modal .qq-product-info {
        display: none;
        margin-bottom: 25px;
        padding: 16px 18px;
        border: 1px solid #dceef5;
        border-left: 3px solid #4db4dc;
        border-radius: 10px;
        background: #f2fafe;
    }

    .moledro-quote-modal .qq-product-info.is-visible {
        display: block;
    }

    .moledro-quote-modal .qq-product-info small {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 7px;
        color: #2496c3;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .moledro-quote-modal .qq-product-info strong {
        display: block;
        color: #17191d;
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    /* HONEYPOT */

    .moledro-quote-modal .qq-honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    /* FORM LABELS */

    .moledro-quote-modal .form-label {
        display: block;
        margin-bottom: 8px;
        color: #303640;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 700;
    }

    .moledro-quote-modal .form-label span {
        color: #d52c83;
    }

    /* FORM CONTROLS */

    .moledro-quote-modal .form-control {
        display: block;
        width: 100%;
        min-height: 49px;
        padding: 12px 14px;
        border: 1px solid #e2e5ea;
        border-radius: 9px;
        background: #fff;
        color: #17191d;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        line-height: 1.5;
        box-shadow: none;
        transition:
                border-color .25s ease,
                box-shadow .25s ease;
    }

    .moledro-quote-modal .form-control::placeholder {
        color: #a1a8b3;
    }

    .moledro-quote-modal .form-control:hover {
        border-color: #cbd1d9;
    }

    .moledro-quote-modal .form-control:focus {
        border-color: #4db4dc;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(77,180,220,.12);
    }

    .moledro-quote-modal textarea.form-control {
        min-height: 125px;
        resize: vertical;
        line-height: 1.75;
    }

    /* SECURITY */

    .moledro-quote-modal .qq-security {
        padding: 19px;
        border: 1px solid #e8eaee;
        border-radius: 11px;
        background: #f7f8fa;
    }

    .moledro-quote-modal .qq-security .form-label {
        margin-bottom: 6px;
    }

    .moledro-quote-modal .qq-security-description {
        margin: 0 0 10px;
        color: #79818d;
        font-size: 11px;
        line-height: 1.6;
    }

    .moledro-quote-modal .qq-math-question {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 120px;
        padding: 9px 16px;
        border: 1px solid #dce1e7;
        border-radius: 8px;
        background: #fff;
        color: #17191d;
        font-family: 'Manrope', sans-serif;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .moledro-quote-modal .qq-math-question i {
        color: #4db4dc;
        font-size: 17px;
        letter-spacing: 0;
    }

    .moledro-quote-modal .qq-security input {
        background: #fff;
    }

    /* SUBMIT BUTTON */

    .moledro-quote-modal .qq-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        min-height: 54px;
        margin-top: 5px;
        padding: 14px 24px;
        border: 1px solid #17191d;
        border-radius: 9px;
        background: #17191d;
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        cursor: pointer;
        transition:
                background .25s ease,
                border-color .25s ease,
                transform .25s ease;
    }

    .moledro-quote-modal .qq-submit:hover {
        background: #4db4dc;
        border-color: #4db4dc;
        color: #fff;
        transform: translateY(-2px);
    }

    .moledro-quote-modal .qq-submit i {
        font-size: 17px;
    }

    .moledro-quote-modal .qq-submit:disabled {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

    /* FORM NOTE */

    .moledro-quote-modal .qq-form-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 15px 0 0;
        color: #929aa6;
        font-size: 11px;
        line-height: 1.7;
        text-align: center;
    }

    .moledro-quote-modal .qq-form-note i {
        flex-shrink: 0;
        color: #4db4dc;
        font-size: 13px;
    }

    /* TABLET */

    @media (max-width: 767.98px) {

        .moledro-quote-modal .modal-dialog {
            max-width: 560px;
        }

        .moledro-quote-modal .qq-modal-header {
            padding: 30px 25px 25px;
        }

        .moledro-quote-modal .qq-modal-header::after {
            left: 25px;
        }

        .moledro-quote-modal .qq-modal-body {
            padding: 26px 25px 30px;
        }

        .moledro-quote-modal .qq-modal-header h2 {
            padding-right: 20px;
            font-size: 27px;
        }
    }

    /* MOBILE */

    @media (max-width: 575.98px) {

        .moledro-quote-modal .modal-dialog {
            width: calc(100% - 16px);
            margin: 8px auto;
        }

        .moledro-quote-modal .modal-content {
            border-radius: 15px;
        }

        .moledro-quote-modal .qq-modal-header {
            padding: 26px 20px 24px;
        }

        .moledro-quote-modal .qq-modal-header::after {
            left: 20px;
        }

        .moledro-quote-modal .qq-modal-kicker {
            font-size: 9px;
            letter-spacing: 1px;
        }

        .moledro-quote-modal .qq-modal-header h2 {
            font-size: 24px;
        }

        .moledro-quote-modal .qq-modal-header p {
            font-size: 12px;
        }

        .moledro-quote-modal .qq-modal-close {
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
        }

        .moledro-quote-modal .qq-modal-body {
            padding: 22px 20px 26px;
        }

        .moledro-quote-modal .qq-security {
            padding: 15px;
        }

        .moledro-quote-modal .qq-submit {
            min-height: 50px;
        }

        .moledro-quote-modal .qq-form-note {
            align-items: flex-start;
            font-size: 10px;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .moledro-quote-modal .qq-submit,
        .moledro-quote-modal .qq-modal-close,
        .moledro-quote-modal .form-control {
            transition: none;
        }
    }


    .moledro-footer .footer-contact {
        gap: 17px;
    }

    .moledro-footer .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 25px 0;
    }
}

/* MOLEDRO | HOMEPAGE FINAL - Add to end of site.css */
.moledro-home,.moledro-services-section,.home-showcase-section{--m-dark:#17191d;--m-blue:#4db4dc;--m-text:#303640;--m-muted:#7d8591;--m-border:#e8ebef}
.moledro-home{padding:24px 0 0;background:#fff}
.moledro-home .home-slider{position:relative;overflow:hidden;border-radius:20px;background:#17191d}
.moledro-home .carousel-item,.moledro-home .home-slide{min-height:clamp(420px,42vw,650px)}
.moledro-home .home-slide{position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.moledro-home .home-slide-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.moledro-home .home-slide-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,13,20,.87),rgba(9,13,20,.55) 52%,rgba(9,13,20,.06))}
.moledro-home .home-slide-content{position:relative;z-index:1;max-width:780px;padding:70px clamp(28px,6vw,90px);color:#fff}
.moledro-home .home-slide-content h2{max-width:760px;margin:0 0 22px;font-size:clamp(36px,5vw,70px);font-weight:800;line-height:1.1;letter-spacing:-.04em;color:#fff}
.moledro-home .home-slide-content p{max-width:550px;margin:0 0 30px;font-size:clamp(14px,1.5vw,17px);line-height:1.8;color:#e3e8ed}
.moledro-home .home-slide-label{display:inline-block;margin-bottom:18px;color:#4db4dc;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.moledro-home .home-slide-button{display:inline-flex;align-items:center;gap:16px;min-height:52px;padding:14px 23px;border-radius:9px;background:#4db4dc;color:#111820;font-size:13px;font-weight:800;text-decoration:none;transition:.2s}
.moledro-home .home-slide-button:hover{background:#fff;color:#17191d;transform:translateY(-2px)}
.moledro-home .carousel-control-prev,.moledro-home .carousel-control-next{top:auto;bottom:28px;width:45px;height:45px;border:1px solid #ffffff55;border-radius:50%;background:#17191d99;opacity:1}
.moledro-home .carousel-control-prev{left:auto;right:88px}.moledro-home .carousel-control-next{right:30px}
.moledro-home .home-slide-empty{background:radial-gradient(circle at 85% 30%,#285064 0,transparent 40%),#17191d}
.moledro-services-section{padding:95px 0 105px;background:#f8f9fb;color:var(--m-text)}
.moledro-services-section .section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:34px}
.moledro-services-section .section-kicker{display:block;margin-bottom:10px;color:#2496c3;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.moledro-services-section .section-heading h2{margin:0;color:#17191d;font-size:clamp(30px,3.5vw,46px);font-weight:800;letter-spacing:-.04em}
.moledro-services-section .section-heading>p{max-width:430px;margin:0;color:#7d8591;font-size:14px;line-height:1.8}
.moledro-services-section .product-category-sidebar{overflow:hidden;position:sticky;top:100px;border:1px solid #e8ebef;border-radius:16px;background:#fff}
.moledro-services-section .product-category-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px;background:#17191d;color:#fff}
.moledro-services-section .product-category-sidebar-head span{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#4db4dc}
.moledro-services-section .product-category-sidebar-head h3{margin:8px 0 0;color:#fff;font-size:20px;font-weight:800}
.moledro-services-section .product-category-head-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#ffffff14;color:#4db4dc}
.moledro-services-section .product-category-all{display:flex;align-items:center;gap:12px;margin:16px;padding:14px;border-radius:11px;background:#f6f8fa;color:#303640;text-decoration:none}
.moledro-services-section .product-category-all.active,.moledro-services-section .product-category-all:hover{background:#eaf7fc;color:#157da5}
.moledro-services-section .product-category-all-icon,.moledro-services-section .product-category-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#e9edf1;color:#2496c3}
.moledro-services-section .product-category-all-text,.moledro-services-section .product-category-name{display:flex;flex:1;flex-direction:column;min-width:0}
.moledro-services-section .product-category-all-text strong,.moledro-services-section .product-category-name strong{font-size:13px;font-weight:750}
.moledro-services-section .product-category-all-text small,.moledro-services-section .product-category-name small{margin-top:4px;color:#9299a4;font-size:11px}
.moledro-services-section .product-category-list{padding:0 16px 16px}
.moledro-services-section .product-category-item{border-bottom:1px solid #eff0f2}
.moledro-services-section .product-category-parent{display:flex;align-items:center;gap:5px}
.moledro-services-section .product-category-parent-link{display:flex;align-items:center;flex:1;min-width:0;gap:11px;padding:13px 0;color:#303640;text-decoration:none}
.moledro-services-section .product-category-parent-link:hover,.moledro-services-section .product-category-parent-link.active{color:#2496c3}
.moledro-services-section .product-category-toggle,.moledro-services-section .product-category-direct{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:0;border-radius:7px;background:#f1f3f6;color:#68717d;cursor:pointer}
.moledro-services-section .product-category-toggle.active i{transform:rotate(180deg)}
.moledro-services-section .product-category-children{display:none;padding:0 0 12px 45px}
.moledro-services-section .product-category-children.open{display:block}
.moledro-services-section .product-category-child{display:flex;align-items:center;gap:8px;padding:9px 4px;color:#66707e;font-size:12px;text-decoration:none}
.moledro-services-section .product-category-child>span:nth-child(2){flex:1}
.moledro-services-section .product-category-child-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#b9c2cb}
.moledro-services-section .product-category-child.active,.moledro-services-section .product-category-child:hover{color:#2496c3}
.moledro-services-section .product-category-help{display:flex;gap:12px;margin:0 16px 16px;padding:16px;border-radius:10px;background:#f1f9fc}
.moledro-services-section .product-category-help>span{color:#2496c3;font-size:21px}
.moledro-services-section .product-category-help strong{display:block;color:#17191d;font-size:12px}
.moledro-services-section .product-category-help small{display:block;margin-top:6px;color:#7d8591;font-size:11px;line-height:1.6}
.moledro-services-section .products-result-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:22px;padding:22px 24px;border:1px solid #e8ebef;border-radius:14px;background:#fff}
.moledro-services-section .products-result-heading h3{margin:0 0 6px;color:#17191d;font-size:22px;font-weight:800}
.moledro-services-section .products-result-heading p{margin:0;color:#8b929c;font-size:12px}
.moledro-services-section .products-result-tools{display:flex;align-items:center;gap:15px}
.moledro-services-section .products-result-count{font-size:12px;color:#7d8591}.moledro-services-section .products-result-count strong{color:#17191d}
.moledro-services-section .product-view-switcher{display:flex;gap:4px;padding:4px;border:1px solid #e8ebef;border-radius:9px;background:#f7f8fa}
.moledro-services-section .product-view-button{display:flex;align-items:center;gap:7px;padding:8px 11px;border:0;border-radius:6px;background:transparent;color:#737c87;font-size:12px}
.moledro-services-section .product-view-button.active{background:#17191d;color:#fff}
.moledro-services-section .products-grid-view{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.moledro-services-section .product-view-item{min-width:0}
.moledro-services-section .product-view-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid #e8ebef;border-radius:15px;background:#fff;transition:transform .25s,box-shadow .25s}
.moledro-services-section .product-view-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px #17191d14}
.moledro-services-section .product-view-main{display:flex;flex:1;flex-direction:column;color:inherit;text-decoration:none}
.moledro-services-section .product-view-image{position:relative;overflow:hidden;aspect-ratio:4/3;background:#f0f3f6}
.moledro-services-section .product-view-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.moledro-services-section .product-view-card:hover .product-view-image img{transform:scale(1.045)}
.moledro-services-section .product-view-image-empty{display:grid;place-items:center;width:100%;height:100%;color:#b1bbc5;font-size:42px}
.moledro-services-section .product-view-badge{position:absolute;top:13px;left:13px;padding:7px 10px;border-radius:6px;background:#4db4dc;color:#111820;font-size:10px;font-weight:800}
.moledro-services-section .product-view-content{display:flex;flex:1;flex-direction:column;padding:21px}
.moledro-services-section .product-view-category{margin-bottom:9px;color:#2496c3;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.moledro-services-section .product-view-content h3{margin:0 0 12px;color:#17191d;font-size:18px;font-weight:800;line-height:1.45}
.moledro-services-section .product-view-code{display:flex;gap:8px;margin-bottom:12px;font-size:11px;color:#8a929d}.moledro-services-section .product-view-code strong{color:#505964}
.moledro-services-section .product-view-description{margin:0 0 18px;color:#7d8591;font-size:12px;line-height:1.8}
.moledro-services-section .product-view-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid #edf0f2;color:#17191d;font-size:12px;font-weight:800}
.moledro-services-section .product-view-action-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#edf8fc;color:#2496c3}
.moledro-services-section .product-commerce{padding:0 21px 20px}
.moledro-services-section .product-commerce-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 12px}.moledro-services-section .product-commerce-price strong{font-size:18px;color:#17191d}.moledro-services-section .product-commerce-price del{font-size:12px;color:#9ba2ac}
.moledro-services-section .product-commerce-stock{margin-bottom:10px;font-size:11px}
.moledro-services-section .product-commerce-actions{display:flex;flex-wrap:wrap;gap:8px}
.moledro-services-section .product-commerce-actions form{flex:1;min-width:120px}
.moledro-services-section .product-commerce-quote,.moledro-services-section .product-commerce-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:42px;padding:10px 13px;border:1px solid #17191d;border-radius:8px;background:#17191d;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.moledro-services-section .product-commerce-cart{width:100%;border-color:#4db4dc;background:#4db4dc;color:#17191d}
.moledro-services-section .product-commerce-quote:hover{background:#2496c3;border-color:#2496c3}.moledro-services-section .product-commerce-cart:hover{background:#7bc9e6}
.moledro-services-section .products-list-view{display:flex;flex-direction:column;gap:18px}
.moledro-services-section .products-list-view .product-view-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.moledro-services-section .products-list-view .product-view-main{display:grid;grid-template-columns:220px minmax(0,1fr);height:100%}
.moledro-services-section .products-list-view .product-view-image{height:100%;min-height:180px;aspect-ratio:auto}
.moledro-services-section .products-list-view .product-commerce{width:190px;padding:20px}
.moledro-services-section .product-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin-top:35px}
.moledro-services-section .product-pagination a,.moledro-services-section .pagination-dots{display:grid;place-items:center;min-width:39px;height:39px;padding:0 10px;border:1px solid #e5e8ed;border-radius:8px;background:#fff;color:#505a66;font-size:13px;text-decoration:none}
.moledro-services-section .product-pagination a.active,.moledro-services-section .product-pagination a:hover{background:#17191d;border-color:#17191d;color:#fff}
.moledro-services-section .products-empty{padding:80px 25px;border:1px dashed #d6dce3;border-radius:15px;background:#fff;text-align:center}.moledro-services-section .products-empty>i{font-size:42px;color:#4db4dc}.moledro-services-section .products-empty h3{margin:18px 0 8px;font-size:20px;color:#17191d}.moledro-services-section .products-empty p{color:#7d8591;font-size:13px}
.home-showcase-section{padding:75px 0;background:#fff}
@media(max-width:1199.98px){.moledro-services-section .products-grid-view{grid-template-columns:repeat(2,minmax(0,1fr))}.moledro-services-section .products-list-view .product-view-main{grid-template-columns:160px minmax(0,1fr)}}
@media(max-width:991.98px){.moledro-services-section{padding:65px 0}.moledro-services-section .product-category-sidebar{position:static;margin-bottom:20px}.moledro-services-section .section-heading{align-items:start;flex-direction:column;gap:12px}.moledro-services-section .products-list-view .product-view-card{display:flex}.moledro-services-section .products-list-view .product-view-main{display:grid;grid-template-columns:190px 1fr}.moledro-services-section .products-list-view .product-commerce{width:auto;padding:0 20px 20px}}
@media(max-width:575.98px){.moledro-home{padding:10px 0 0}.moledro-home .home-slider{border-radius:12px}.moledro-home .carousel-item,.moledro-home .home-slide{min-height:430px}.moledro-home .home-slide-content{padding:35px 22px 75px}.moledro-home .home-slide-content h2{font-size:35px}.moledro-home .home-slide-content p{font-size:13px}.moledro-home .carousel-control-prev,.moledro-home .carousel-control-next{bottom:16px;width:38px;height:38px}.moledro-home .carousel-control-prev{right:65px}.moledro-home .carousel-control-next{right:16px}.moledro-services-section .products-grid-view{grid-template-columns:1fr}.moledro-services-section .products-result-header{padding:18px}.moledro-services-section .products-result-tools{justify-content:space-between;width:100%}.moledro-services-section .products-list-view .product-view-card{display:flex}.moledro-services-section .products-list-view .product-view-main{display:flex;flex-direction:column}.moledro-services-section .products-list-view .product-view-image{height:auto;aspect-ratio:4/3}.moledro-services-section .products-list-view .product-commerce{width:auto}}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   STANDARD CORPORATE PAGE | FINAL CSS
============================================================ */

.moledro-standard-page {
    --mp-blue: #4db4dc;
    --mp-pink: #d52c83;
    --mp-yellow: #e8c51d;
    --mp-dark: #17191d;
    --mp-text: #303640;
    --mp-muted: #747d89;
    --mp-border: #e8eaee;
    --mp-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--mp-text);
}

/* ============================================================
   PAGE MAIN LAYOUT
============================================================ */

.moledro-standard-page .page-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
}

.moledro-standard-page .page-main {
    width: 100%;
    min-width: 0;
    padding: 75px 0 100px;
}

/* ============================================================
   COMMON SECTIONS
============================================================ */

.moledro-standard-page .page-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 0 80px;
}

.moledro-standard-page .page-section:last-child {
    margin-bottom: 0;
}

.moledro-standard-page .page-section > * {
    max-width: 100%;
}

/* ============================================================
   SLIDER
============================================================ */

.moledro-standard-page .page-section-slides {
    overflow: hidden;
    border-radius: 16px;
}

.moledro-standard-page .page-section-slides img,
.moledro-standard-page .page-section-slides video {
    max-width: 100%;
}

/* ============================================================
   PAGE INTRODUCTION
============================================================ */

.moledro-standard-page .page-intro {
    position: relative;
    width: 100%;
    margin: 0 0 85px;
}

.moledro-standard-page .page-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
}

.moledro-standard-page .page-intro-grid.page-intro-without-image {
    grid-template-columns: minmax(0, 1fr);
}

/* INTRO IMAGE */

.moledro-standard-page .page-intro-image {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f0f2f5;
}

.moledro-standard-page .page-intro-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform .5s ease;
}

.moledro-standard-page .page-intro-image:hover img {
    transform: scale(1.035);
}

.moledro-standard-page .page-intro-image-accent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 90px;
    height: 5px;
    background: linear-gradient(
            90deg,
            var(--mp-blue),
            var(--mp-pink),
            var(--mp-yellow)
    );
}

/* INTRO CONTENT */

.moledro-standard-page .page-intro-content {
    min-width: 0;
    padding: 15px 0;
}

.moledro-standard-page .page-intro-without-image .page-intro-content {
    max-width: 900px;
    padding: 0;
}

/* EYEBROW */

.moledro-standard-page .page-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color: var(--mp-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.moledro-standard-page .page-intro-eyebrow-line {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--mp-blue);
}

/* TITLE */

.moledro-standard-page .page-intro-content h2 {
    margin: 0 0 25px;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(29px, 3.2vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.2px;
    overflow-wrap: anywhere;
}

/* DESCRIPTION */

.moledro-standard-page .page-intro-description {
    color: var(--mp-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* SIGNATURE */

.moledro-standard-page .page-intro-signature {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 30px;
}

.moledro-standard-page .signature-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.moledro-standard-page .signature-blue {
    background: var(--mp-blue);
}

.moledro-standard-page .signature-pink {
    background: var(--mp-pink);
}

.moledro-standard-page .signature-yellow {
    background: var(--mp-yellow);
}

.moledro-standard-page .signature-text {
    margin-left: 10px;
    color: #9299a4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

/* ============================================================
   CONTENT BLOCKS
============================================================ */

.moledro-standard-page .page-section-contents {
    color: var(--mp-text);
}

.moledro-standard-page .page-section-contents h2,
.moledro-standard-page .page-section-contents h3,
.moledro-standard-page .page-section-contents h4 {
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
}

.moledro-standard-page .page-section-contents p {
    color: var(--mp-muted);
    font-size: 15px;
    line-height: 1.95;
}

.moledro-standard-page .page-section-contents img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ============================================================
   TABS
============================================================ */

.moledro-standard-page .page-section-tabs {
    overflow: hidden;
}

/* ============================================================
   GALLERY
============================================================ */

.moledro-standard-page .page-section-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ============================================================
   VIDEOS
============================================================ */

.moledro-standard-page .page-section-videos iframe,
.moledro-standard-page .page-section-videos video {
    max-width: 100%;
    border-radius: 12px;
}

/* ============================================================
   DOCUMENTS
============================================================ */

.moledro-standard-page .page-section-documents {
    min-width: 0;
}

/* ============================================================
   CONTACTS
============================================================ */

.moledro-standard-page .page-section-contacts {
    min-width: 0;
}

/* ============================================================
   CHILD PAGES
============================================================ */

.moledro-standard-page .page-section-children {
    min-width: 0;
}

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

@media (max-width: 991.98px) {

    .moledro-standard-page .page-main-container {
        padding: 0 24px;
    }

    .moledro-standard-page .page-main {
        padding: 60px 0 80px;
    }

    .moledro-standard-page .page-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .moledro-standard-page .page-intro-image img {
        aspect-ratio: 16 / 10;
    }

    .moledro-standard-page .page-intro {
        margin-bottom: 65px;
    }

    .moledro-standard-page .page-section {
        margin-bottom: 65px;
    }

    .moledro-standard-page .page-intro-content {
        padding: 0;
    }
}

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

@media (max-width: 575.98px) {

    .moledro-standard-page .page-main-container {
        padding: 0 18px;
    }

    .moledro-standard-page .page-main {
        padding: 40px 0 65px;
    }

    .moledro-standard-page .page-intro {
        margin-bottom: 50px;
    }

    .moledro-standard-page .page-intro-grid {
        gap: 25px;
    }

    .moledro-standard-page .page-intro-image {
        border-radius: 12px;
    }

    .moledro-standard-page .page-intro-image img {
        aspect-ratio: 4 / 3;
    }

    .moledro-standard-page .page-intro-eyebrow {
        gap: 9px;
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-standard-page .page-intro-eyebrow-line {
        width: 22px;
    }

    .moledro-standard-page .page-intro-content h2 {
        margin-bottom: 18px;
        font-size: 29px;
        letter-spacing: -.7px;
    }

    .moledro-standard-page .page-intro-description {
        font-size: 14px;
        line-height: 1.85;
    }

    .moledro-standard-page .page-intro-signature {
        margin-top: 23px;
    }

    .moledro-standard-page .signature-text {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-standard-page .page-section {
        margin-bottom: 50px;
    }

    .moledro-standard-page .page-section-slides {
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-standard-page .page-intro-image img {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   NEWS / ARTICLE PAGE | FINAL CSS
============================================================ */

.moledro-news-page {
    --news-blue: #4db4dc;
    --news-pink: #d52c83;
    --news-yellow: #e8c51d;
    --news-dark: #17191d;
    --news-text: #303640;
    --news-muted: #747d89;
    --news-border: #e8eaee;
    --news-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--news-text);
}

/* MAIN LAYOUT */

.moledro-news-page .page-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
}

.moledro-news-page .page-main {
    width: 100%;
    min-width: 0;
    padding: 75px 0 100px;
}

/* NEWS HEADER */

.moledro-news-page .news-header {
    width: 100%;
    margin-bottom: 85px;
}

.moledro-news-page .news-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
}

.moledro-news-page .news-header-without-image {
    grid-template-columns: minmax(0, 1fr);
}

.moledro-news-page .news-header-content {
    min-width: 0;
}

.moledro-news-page .news-header-without-image .news-header-content {
    max-width: 920px;
}

/* NEWS META */

.moledro-news-page .news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.moledro-news-page .news-meta-type {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--news-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-news-page .news-meta-type i {
    font-size: 15px;
}

.moledro-news-page .news-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 15px;
    border-left: 1px solid var(--news-border);
    color: #929aa6;
    font-size: 12px;
    font-weight: 600;
}

.moledro-news-page .news-meta-item i {
    font-size: 15px;
    color: #a4acb7;
}

/* TITLE */

.moledro-news-page .news-title {
    margin: 0 0 25px;
    color: var(--news-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(31px, 3.4vw, 49px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
    overflow-wrap: anywhere;
}

/* LEAD */

.moledro-news-page .news-lead {
    max-width: 610px;
    margin: 0;
    color: var(--news-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.95;
}

/* BRAND ACCENT */

.moledro-news-page .news-title-line {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 90px;
    height: 4px;
    margin-top: 32px;
}

.moledro-news-page .news-title-line span {
    display: block;
    height: 4px;
    border-radius: 5px;
}

.moledro-news-page .news-line-blue {
    width: 46px;
    background: var(--news-blue);
}

.moledro-news-page .news-line-pink {
    width: 23px;
    background: var(--news-pink);
}

.moledro-news-page .news-line-yellow {
    width: 13px;
    background: var(--news-yellow);
}

/* COVER IMAGE */

.moledro-news-page .news-cover {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f0f2f5;
}

.moledro-news-page .news-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform .5s ease;
}

.moledro-news-page .news-cover:hover img {
    transform: scale(1.035);
}

.moledro-news-page .news-cover-decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 95px;
    height: 5px;
    background: linear-gradient(
            90deg,
            var(--news-blue),
            var(--news-pink),
            var(--news-yellow)
    );
}

/* ARTICLE */

.moledro-news-page .news-article {
    width: 100%;
    margin-bottom: 85px;
}

.moledro-news-page .news-article-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 30px;
    color: var(--news-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.moledro-news-page .news-article-label-line {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--news-blue);
}

.moledro-news-page .news-article-body {
    max-width: 100%;
    color: var(--news-text);
}

.moledro-news-page .news-article-body h2,
.moledro-news-page .news-article-body h3,
.moledro-news-page .news-article-body h4 {
    color: var(--news-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
}

.moledro-news-page .news-article-body p {
    color: var(--news-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 2;
}

.moledro-news-page .news-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.moledro-news-page .news-article-body blockquote {
    margin: 30px 0;
    padding: 22px 28px;
    border-left: 3px solid var(--news-blue);
    border-radius: 0 10px 10px 0;
    background: var(--news-bg);
    color: var(--news-text);
    font-size: 16px;
    line-height: 1.8;
}

/* OTHER SECTIONS */

.moledro-news-page .page-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 80px;
}

.moledro-news-page .page-section:last-child {
    margin-bottom: 0;
}

.moledro-news-page .page-section > * {
    max-width: 100%;
}

.moledro-news-page .news-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.moledro-news-page .news-videos iframe,
.moledro-news-page .news-videos video {
    max-width: 100%;
    border-radius: 12px;
}

.moledro-news-page .news-slides {
    overflow: hidden;
    border-radius: 16px;
}

/* TABLET */

@media (max-width: 991.98px) {

    .moledro-news-page .page-main-container {
        padding: 0 24px;
    }

    .moledro-news-page .page-main {
        padding: 60px 0 80px;
    }

    .moledro-news-page .news-header-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .moledro-news-page .news-cover img {
        aspect-ratio: 16 / 10;
    }

    .moledro-news-page .news-header,
    .moledro-news-page .news-article {
        margin-bottom: 65px;
    }

    .moledro-news-page .page-section {
        margin-bottom: 65px;
    }
}

/* MOBILE */

@media (max-width: 575.98px) {

    .moledro-news-page .page-main-container {
        padding: 0 18px;
    }

    .moledro-news-page .page-main {
        padding: 40px 0 65px;
    }

    .moledro-news-page .news-header-grid {
        gap: 25px;
    }

    .moledro-news-page .news-meta {
        gap: 10px;
        margin-bottom: 18px;
    }

    .moledro-news-page .news-meta-type {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-news-page .news-meta-item {
        padding-left: 10px;
        font-size: 11px;
    }

    .moledro-news-page .news-meta-item span {
        display: none;
    }

    .moledro-news-page .news-title {
        margin-bottom: 18px;
        font-size: 30px;
        letter-spacing: -.7px;
    }

    .moledro-news-page .news-lead {
        font-size: 14px;
        line-height: 1.85;
    }

    .moledro-news-page .news-title-line {
        margin-top: 24px;
    }

    .moledro-news-page .news-cover {
        border-radius: 12px;
    }

    .moledro-news-page .news-cover img {
        aspect-ratio: 4 / 3;
    }

    .moledro-news-page .news-header,
    .moledro-news-page .news-article {
        margin-bottom: 50px;
    }

    .moledro-news-page .news-article-label {
        margin-bottom: 22px;
        font-size: 9px;
    }

    .moledro-news-page .news-article-body p {
        font-size: 14px;
        line-height: 1.9;
    }

    .moledro-news-page .page-section {
        margin-bottom: 50px;
    }

    .moledro-news-page .news-slides {
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-news-page .news-cover img {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE LIST DESIGN | FINAL CSS
============================================================ */

.moledro-list-page {
    --ml-blue: #4db4dc;
    --ml-pink: #d52c83;
    --ml-yellow: #e8c51d;
    --ml-dark: #17191d;
    --ml-text: #303640;
    --ml-muted: #747d89;
    --ml-border: #e8eaee;
    --ml-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--ml-text);
}

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

.moledro-list-page .moledro-list-header {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #17191d;
    color: #fff;
}

.moledro-list-page .moledro-list-header::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 50%;
    pointer-events: none;
}

.moledro-list-page .moledro-list-header::after {
    content: "";
    position: absolute;
    top: -95px;
    right: -50px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 50%;
    pointer-events: none;
}

.moledro-list-page .moledro-list-header-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 45px 30px 80px;
}

/* ============================================================
   BREADCRUMB
============================================================ */

.moledro-list-page .moledro-list-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 45px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.moledro-list-page .moledro-list-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #aab2bd;
    text-decoration: none;
    transition: color .2s ease;
}

.moledro-list-page .moledro-list-breadcrumb a:hover {
    color: #4db4dc;
}

.moledro-list-page .moledro-list-breadcrumb a i {
    font-size: 14px;
}

.moledro-list-page .breadcrumb-separator {
    color: #646c77;
    font-size: 9px;
}

.moledro-list-page .breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

/* ============================================================
   HEADING
============================================================ */

.moledro-list-page .moledro-list-heading {
    max-width: 850px;
}

.moledro-list-page .moledro-list-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 21px;
    color: #4db4dc;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.moledro-list-page .moledro-list-eyebrow-line {
    display: block;
    width: 30px;
    height: 2px;
    background: #4db4dc;
}

.moledro-list-page .moledro-list-heading h1 {
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.5px;
    overflow-wrap: anywhere;
}

.moledro-list-page .moledro-list-heading p {
    max-width: 690px;
    margin: 22px 0 0;
    color: #b0b8c4;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.9;
}

/* ============================================================
   BRAND ACCENT
============================================================ */

.moledro-list-page .moledro-list-accent {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 34px;
}

.moledro-list-page .moledro-list-accent span {
    display: block;
    height: 4px;
    border-radius: 5px;
}

.moledro-list-page .moledro-list-accent span:nth-child(1) {
    width: 48px;
    background: #4db4dc;
}

.moledro-list-page .moledro-list-accent span:nth-child(2) {
    width: 24px;
    background: #d52c83;
}

.moledro-list-page .moledro-list-accent span:nth-child(3) {
    width: 13px;
    background: #e8c51d;
}

/* ============================================================
   CONTENT CONTAINER
============================================================ */

.moledro-list-page .moledro-list-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 75px 30px 100px;
}

.moledro-list-page .moledro-list-main {
    width: 100%;
    min-width: 0;
}

.moledro-list-page .moledro-list-main > * {
    max-width: 100%;
}

/* ============================================================
   EMPTY STATE
============================================================ */

.moledro-list-page .moledro-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 55px 25px;
    border: 1px solid #e8eaee;
    border-radius: 16px;
    background: #f7f8fa;
    text-align: center;
}

.moledro-list-page .moledro-list-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 23px;
    border-radius: 15px;
    background: #e8f6fb;
    color: #4db4dc;
    font-size: 28px;
}

.moledro-list-page .moledro-list-empty h2 {
    margin: 0 0 12px;
    color: #17191d;
    font-family: 'Manrope', sans-serif;
    font-size: 23px;
    font-weight: 800;
}

.moledro-list-page .moledro-list-empty p {
    max-width: 420px;
    margin: 0;
    color: #747d89;
    font-size: 14px;
    line-height: 1.8;
}

.moledro-list-page .moledro-list-empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    padding: 13px 21px;
    border: 1px solid #17191d;
    border-radius: 8px;
    background: #17191d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
            background .25s ease,
            border-color .25s ease;
}

.moledro-list-page .moledro-list-empty-button:hover {
    border-color: #4db4dc;
    background: #4db4dc;
    color: #fff;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-list-page .moledro-list-header-inner {
        padding: 35px 24px 65px;
    }

    .moledro-list-page .moledro-list-breadcrumb {
        margin-bottom: 35px;
    }

    .moledro-list-page .moledro-list-container {
        padding: 60px 24px 80px;
    }

    .moledro-list-page .moledro-list-heading h1 {
        font-size: 43px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-list-page .moledro-list-header-inner {
        padding: 28px 18px 52px;
    }

    .moledro-list-page .moledro-list-breadcrumb {
        gap: 8px;
        margin-bottom: 32px;
        font-size: 11px;
    }

    .moledro-list-page .moledro-list-eyebrow {
        gap: 9px;
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-list-page .moledro-list-eyebrow-line {
        width: 22px;
    }

    .moledro-list-page .moledro-list-heading h1 {
        font-size: 32px;
        letter-spacing: -.8px;
    }

    .moledro-list-page .moledro-list-heading p {
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.85;
    }

    .moledro-list-page .moledro-list-accent {
        margin-top: 27px;
    }

    .moledro-list-page .moledro-list-container {
        padding: 42px 18px 65px;
    }

    .moledro-list-page .moledro-list-empty {
        min-height: 300px;
        padding: 40px 20px;
        border-radius: 12px;
    }

    .moledro-list-page .moledro-list-empty-icon {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .moledro-list-page .moledro-list-empty h2 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-list-page .moledro-list-breadcrumb a,
    .moledro-list-page .moledro-list-empty-button {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   CUSTOM PAGE DESIGN | FINAL CSS
============================================================ */

.moledro-custom-page {
    --mc-blue: #4db4dc;
    --mc-pink: #d52c83;
    --mc-yellow: #e8c51d;
    --mc-dark: #17191d;
    --mc-text: #303640;
    --mc-muted: #747d89;
    --mc-border: #e8eaee;
    --mc-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--mc-text);
}

/* ============================================================
   MAIN LAYOUT
============================================================ */

.moledro-custom-page .page-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
}

.moledro-custom-page .page-main {
    width: 100%;
    min-width: 0;
    padding: 75px 0 100px;
}

/* ============================================================
   FEATURED SLIDER
============================================================ */

.moledro-custom-page .custom-featured-slider {
    position: relative;
    width: 100%;
    margin-bottom: 85px;
    overflow: hidden;
    border-radius: 16px;
}

.moledro-custom-page .custom-featured-slider img,
.moledro-custom-page .custom-featured-slider video {
    max-width: 100%;
}

/* ============================================================
   CUSTOM INTRO
============================================================ */

.moledro-custom-page .custom-intro {
    position: relative;
    width: 100%;
    margin-bottom: 85px;
}

.moledro-custom-page .custom-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
}

.moledro-custom-page .custom-intro-without-image {
    grid-template-columns: minmax(0, 1fr);
}

.moledro-custom-page .custom-intro-content {
    min-width: 0;
}

.moledro-custom-page .custom-intro-without-image .custom-intro-content {
    max-width: 900px;
}

/* LABEL */

.moledro-custom-page .custom-intro-label {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
    color: var(--mc-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.moledro-custom-page .custom-intro-label-line {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--mc-blue);
}

/* TITLE */

.moledro-custom-page .custom-intro-content h1 {
    margin: 0 0 25px;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(31px, 3.5vw, 49px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.3px;
    overflow-wrap: anywhere;
}

/* DESCRIPTION */

.moledro-custom-page .custom-intro-content > p {
    max-width: 640px;
    margin: 0;
    color: var(--mc-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.95;
    white-space: pre-line;
}

/* STATS */

.moledro-custom-page .custom-intro-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--mc-border);
}

.moledro-custom-page .custom-intro-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
    padding-right: 25px;
    margin-right: 25px;
    border-right: 1px solid var(--mc-border);
}

.moledro-custom-page .custom-intro-stat:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

.moledro-custom-page .custom-intro-stat strong {
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.moledro-custom-page .custom-intro-stat span {
    color: var(--mc-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

/* BRAND ACCENT */

.moledro-custom-page .custom-intro-accent {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
}

.moledro-custom-page .custom-intro-accent span {
    display: block;
    height: 4px;
    border-radius: 5px;
}

.moledro-custom-page .custom-intro-accent span:nth-child(1) {
    width: 46px;
    background: var(--mc-blue);
}

.moledro-custom-page .custom-intro-accent span:nth-child(2) {
    width: 23px;
    background: var(--mc-pink);
}

.moledro-custom-page .custom-intro-accent span:nth-child(3) {
    width: 13px;
    background: var(--mc-yellow);
}

/* ============================================================
   COVER IMAGE
============================================================ */

.moledro-custom-page .custom-intro-cover {
    position: relative;
    width: 100%;
    min-width: 0;
}

.moledro-custom-page .custom-intro-cover-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #f0f2f5;
}

.moledro-custom-page .custom-intro-cover-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform .5s ease;
}

.moledro-custom-page .custom-intro-cover-frame:hover img {
    transform: scale(1.035);
}

.moledro-custom-page .custom-intro-cover-decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 95px;
    height: 5px;
    background: linear-gradient(
            90deg,
            var(--mc-blue),
            var(--mc-pink),
            var(--mc-yellow)
    );
}

/* ============================================================
   COMMON CONTENT SECTIONS
============================================================ */

.moledro-custom-page .page-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 80px;
}

.moledro-custom-page .page-section:last-child {
    margin-bottom: 0;
}

.moledro-custom-page .page-section > * {
    max-width: 100%;
}

/* CONTENT */

.moledro-custom-page .custom-contents h2,
.moledro-custom-page .custom-contents h3,
.moledro-custom-page .custom-contents h4 {
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
}

.moledro-custom-page .custom-contents p {
    color: var(--mc-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.95;
}

.moledro-custom-page .custom-contents img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* GALLERY */

.moledro-custom-page .custom-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* VIDEOS */

.moledro-custom-page .custom-videos iframe,
.moledro-custom-page .custom-videos video {
    max-width: 100%;
    border-radius: 12px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-custom-page .page-main-container {
        padding: 0 24px;
    }

    .moledro-custom-page .page-main {
        padding: 60px 0 80px;
    }

    .moledro-custom-page .custom-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .moledro-custom-page .custom-intro-cover-frame img {
        aspect-ratio: 16 / 10;
    }

    .moledro-custom-page .custom-featured-slider,
    .moledro-custom-page .custom-intro {
        margin-bottom: 65px;
    }

    .moledro-custom-page .page-section {
        margin-bottom: 65px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-custom-page .page-main-container {
        padding: 0 18px;
    }

    .moledro-custom-page .page-main {
        padding: 40px 0 65px;
    }

    .moledro-custom-page .custom-featured-slider,
    .moledro-custom-page .custom-intro {
        margin-bottom: 50px;
    }

    .moledro-custom-page .custom-intro-grid {
        gap: 25px;
    }

    .moledro-custom-page .custom-intro-label {
        gap: 9px;
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-custom-page .custom-intro-label-line {
        width: 22px;
    }

    .moledro-custom-page .custom-intro-content h1 {
        margin-bottom: 18px;
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .moledro-custom-page .custom-intro-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .moledro-custom-page .custom-intro-stats {
        margin-top: 25px;
        padding-top: 20px;
    }

    .moledro-custom-page .custom-intro-stat {
        min-width: 75px;
        padding-right: 15px;
        margin-right: 15px;
    }

    .moledro-custom-page .custom-intro-stat strong {
        font-size: 23px;
    }

    .moledro-custom-page .custom-intro-cover-frame {
        border-radius: 12px;
    }

    .moledro-custom-page .custom-intro-cover-frame img {
        aspect-ratio: 4 / 3;
    }

    .moledro-custom-page .page-section {
        margin-bottom: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-custom-page .custom-intro-cover-frame img {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   CATALOG PAGE DESIGN | FINAL CSS
============================================================ */

.moledro-catalog-page {
    --cat-blue: #4db4dc;
    --cat-pink: #d52c83;
    --cat-yellow: #e8c51d;
    --cat-dark: #17191d;
    --cat-text: #303640;
    --cat-muted: #747d89;
    --cat-border: #e8eaee;
    --cat-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--cat-text);
}

/* ============================================================
   MAIN LAYOUT
============================================================ */

.moledro-catalog-page .page-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
}

.moledro-catalog-page .page-main {
    width: 100%;
    min-width: 0;
    padding: 75px 0 100px;
}

/* ============================================================
   CATALOG INTRO
============================================================ */

.moledro-catalog-page .catalog-intro {
    position: relative;
    width: 100%;
    margin-bottom: 85px;
}

.moledro-catalog-page .catalog-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(35px, 5vw, 85px);
}

.moledro-catalog-page .catalog-intro-without-image {
    grid-template-columns: minmax(0, 1fr);
}

.moledro-catalog-page .catalog-intro-content {
    min-width: 0;
}

.moledro-catalog-page .catalog-intro-without-image .catalog-intro-content {
    max-width: 900px;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-catalog-page .page-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color: var(--cat-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.moledro-catalog-page .catalog-kicker-line {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--cat-blue);
}

/* ============================================================
   TITLE
============================================================ */

.moledro-catalog-page .catalog-intro-content h1 {
    margin: 0 0 25px;
    color: var(--cat-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(31px, 3.5vw, 49px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.3px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-catalog-page .catalog-intro-content > p {
    max-width: 640px;
    margin: 0;
    color: var(--cat-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.95;
    white-space: pre-line;
}

/* ============================================================
   BRAND ACCENT
============================================================ */

.moledro-catalog-page .catalog-intro-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
}

.moledro-catalog-page .catalog-intro-line span {
    display: block;
    height: 4px;
    border-radius: 5px;
}

.moledro-catalog-page .catalog-intro-line span:nth-child(1) {
    width: 46px;
    background: var(--cat-blue);
}

.moledro-catalog-page .catalog-intro-line span:nth-child(2) {
    width: 23px;
    background: var(--cat-pink);
}

.moledro-catalog-page .catalog-intro-line span:nth-child(3) {
    width: 13px;
    background: var(--cat-yellow);
}

/* ============================================================
   CATALOG META
============================================================ */

.moledro-catalog-page .catalog-intro-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--cat-border);
}

.moledro-catalog-page .catalog-intro-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 100px;
    margin-right: 25px;
    padding-right: 25px;
    border-right: 1px solid var(--cat-border);
}

.moledro-catalog-page .catalog-intro-stat:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.moledro-catalog-page .catalog-intro-stat strong {
    color: var(--cat-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.moledro-catalog-page .catalog-intro-stat span {
    color: var(--cat-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

/* ============================================================
   COVER IMAGE
============================================================ */

.moledro-catalog-page .catalog-cover {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f0f2f5;
}

.moledro-catalog-page .catalog-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform .5s ease;
}

.moledro-catalog-page .catalog-cover:hover img {
    transform: scale(1.035);
}

.moledro-catalog-page .catalog-cover-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    background: rgba(23,25,29,.88);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    backdrop-filter: blur(8px);
}

.moledro-catalog-page .catalog-cover-label i {
    color: var(--cat-blue);
    font-size: 13px;
}

.moledro-catalog-page .catalog-cover-decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 95px;
    height: 5px;
    background: linear-gradient(
            90deg,
            var(--cat-blue),
            var(--cat-pink),
            var(--cat-yellow)
    );
}

/* ============================================================
   CONTENT SECTIONS
============================================================ */

.moledro-catalog-page .page-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 80px;
}

.moledro-catalog-page .page-section:last-child {
    margin-bottom: 0;
}

.moledro-catalog-page .page-section > * {
    max-width: 100%;
}

/* CONTENT TYPOGRAPHY */

.moledro-catalog-page .catalog-contents h2,
.moledro-catalog-page .catalog-contents h3,
.moledro-catalog-page .catalog-contents h4 {
    color: var(--cat-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
}

.moledro-catalog-page .catalog-contents p {
    color: var(--cat-muted);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.95;
}

.moledro-catalog-page .catalog-contents img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* GALLERY */

.moledro-catalog-page .catalog-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* VIDEOS */

.moledro-catalog-page .catalog-videos iframe,
.moledro-catalog-page .catalog-videos video {
    max-width: 100%;
    border-radius: 12px;
}

/* SLIDER */

.moledro-catalog-page .catalog-slides {
    overflow: hidden;
    border-radius: 16px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-catalog-page .page-main-container {
        padding: 0 24px;
    }

    .moledro-catalog-page .page-main {
        padding: 60px 0 80px;
    }

    .moledro-catalog-page .catalog-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .moledro-catalog-page .catalog-cover img {
        aspect-ratio: 16 / 10;
    }

    .moledro-catalog-page .catalog-intro {
        margin-bottom: 65px;
    }

    .moledro-catalog-page .page-section {
        margin-bottom: 65px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-catalog-page .page-main-container {
        padding: 0 18px;
    }

    .moledro-catalog-page .page-main {
        padding: 40px 0 65px;
    }

    .moledro-catalog-page .catalog-intro {
        margin-bottom: 50px;
    }

    .moledro-catalog-page .catalog-intro-grid {
        gap: 25px;
    }

    .moledro-catalog-page .page-section-kicker {
        gap: 9px;
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-catalog-page .catalog-kicker-line {
        width: 22px;
    }

    .moledro-catalog-page .catalog-intro-content h1 {
        margin-bottom: 18px;
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .moledro-catalog-page .catalog-intro-content > p {
        font-size: 14px;
        line-height: 1.85;
    }

    .moledro-catalog-page .catalog-intro-line {
        margin-top: 24px;
    }

    .moledro-catalog-page .catalog-intro-meta {
        margin-top: 25px;
        padding-top: 20px;
    }

    .moledro-catalog-page .catalog-intro-stat {
        min-width: 75px;
        margin-right: 15px;
        padding-right: 15px;
    }

    .moledro-catalog-page .catalog-intro-stat strong {
        font-size: 23px;
    }

    .moledro-catalog-page .catalog-cover {
        border-radius: 12px;
    }

    .moledro-catalog-page .catalog-cover img {
        aspect-ratio: 4 / 3;
    }

    .moledro-catalog-page .catalog-cover-label {
        left: 12px;
        bottom: 12px;
        padding: 9px 12px;
        font-size: 9px;
    }

    .moledro-catalog-page .page-section {
        margin-bottom: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-catalog-page .catalog-cover img {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   BLOG / ARTICLE PAGE | FINAL CSS
============================================================ */

.moledro-blog-page {
    --blog-blue: #4db4dc;
    --blog-pink: #d52c83;
    --blog-yellow: #e8c51d;
    --blog-dark: #17191d;
    --blog-text: #303640;
    --blog-muted: #747d89;
    --blog-border: #e8eaee;
    --blog-bg: #f7f8fa;

    width: 100%;
    background: #fff;
    color: var(--blog-text);
}

/* ============================================================
   MAIN LAYOUT
============================================================ */

.moledro-blog-page .page-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
}

.moledro-blog-page .page-main {
    width: 100%;
    min-width: 0;
    padding: 75px 0 100px;
}

/* ============================================================
   BLOG INTRO
============================================================ */

.moledro-blog-page .blog-intro {
    width: 100%;
    margin-bottom: 45px;
}

.moledro-blog-page .blog-intro-inner {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

/* META */

.moledro-blog-page .blog-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 27px;
}

.moledro-blog-page .blog-meta-category {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--blog-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.moledro-blog-page .blog-meta-category i {
    font-size: 15px;
}

.moledro-blog-page .blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 16px;
    border-left: 1px solid var(--blog-border);
    color: #929aa6;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.moledro-blog-page .blog-meta-item i {
    font-size: 15px;
}

/* TITLE */

.moledro-blog-page .blog-title {
    margin: 0;
    color: var(--blog-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(34px, 4.3vw, 60px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -1.6px;
    overflow-wrap: anywhere;
}

/* LEAD */

.moledro-blog-page .blog-lead {
    max-width: 740px;
    margin: 25px auto 0;
    color: var(--blog-muted);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
}

/* BRAND ACCENT */

.moledro-blog-page .blog-intro-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 30px;
}

.moledro-blog-page .blog-intro-accent span {
    display: block;
    height: 4px;
    border-radius: 5px;
}

.moledro-blog-page .blog-intro-accent span:nth-child(1) {
    width: 45px;
    background: var(--blog-blue);
}

.moledro-blog-page .blog-intro-accent span:nth-child(2) {
    width: 23px;
    background: var(--blog-pink);
}

.moledro-blog-page .blog-intro-accent span:nth-child(3) {
    width: 13px;
    background: var(--blog-yellow);
}

/* ============================================================
   BLOG COVER
============================================================ */

.moledro-blog-page .blog-cover {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 75px;
    overflow: hidden;
    border-radius: 16px;
    background: #f0f2f5;
}

.moledro-blog-page .blog-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

/* ============================================================
   ARTICLE CONTENT
============================================================ */

.moledro-blog-page .blog-article {
    width: 100%;
    margin-bottom: 85px;
}

.moledro-blog-page .blog-article-inner {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    color: var(--blog-text);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.moledro-blog-page .blog-article-inner h2,
.moledro-blog-page .blog-article-inner h3,
.moledro-blog-page .blog-article-inner h4 {
    color: var(--blog-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.4px;
}

.moledro-blog-page .blog-article-inner h2 {
    margin: 40px 0 20px;
    font-size: 28px;
}

.moledro-blog-page .blog-article-inner h3 {
    margin: 32px 0 17px;
    font-size: 23px;
}

.moledro-blog-page .blog-article-inner h4 {
    margin: 27px 0 14px;
    font-size: 19px;
}

.moledro-blog-page .blog-article-inner p {
    margin: 0 0 23px;
    color: #5c6572;
    font-size: 16px;
    line-height: 2;
}

.moledro-blog-page .blog-article-inner a {
    color: var(--blog-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-blog-page .blog-article-inner a:hover {
    color: var(--blog-pink);
}

.moledro-blog-page .blog-article-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.moledro-blog-page .blog-article-inner ul,
.moledro-blog-page .blog-article-inner ol {
    margin: 0 0 25px;
    padding-left: 25px;
    color: #5c6572;
}

.moledro-blog-page .blog-article-inner li {
    margin-bottom: 9px;
    line-height: 1.9;
}

/* QUOTE */

.moledro-blog-page .blog-article-inner blockquote {
    margin: 35px 0;
    padding: 26px 30px;
    border-left: 3px solid var(--blog-blue);
    border-radius: 0 12px 12px 0;
    background: var(--blog-bg);
    color: var(--blog-dark);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.85;
}

/* TABLE */

.moledro-blog-page .blog-article-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 14px;
}

.moledro-blog-page .blog-article-inner th,
.moledro-blog-page .blog-article-inner td {
    padding: 13px 16px;
    border: 1px solid var(--blog-border);
    text-align: left;
}

.moledro-blog-page .blog-article-inner th {
    background: var(--blog-bg);
    color: var(--blog-dark);
    font-weight: 700;
}

/* ============================================================
   OTHER SECTIONS
============================================================ */

.moledro-blog-page .page-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 80px;
}

.moledro-blog-page .page-section:last-child {
    margin-bottom: 0;
}

.moledro-blog-page .page-section > * {
    max-width: 100%;
}

.moledro-blog-page .blog-gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.moledro-blog-page .blog-videos iframe,
.moledro-blog-page .blog-videos video {
    max-width: 100%;
    border-radius: 12px;
}

.moledro-blog-page .blog-slides {
    overflow: hidden;
    border-radius: 16px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-blog-page .page-main-container {
        padding: 0 24px;
    }

    .moledro-blog-page .page-main {
        padding: 60px 0 80px;
    }

    .moledro-blog-page .blog-title {
        font-size: 44px;
    }

    .moledro-blog-page .blog-cover {
        margin-bottom: 60px;
    }

    .moledro-blog-page .blog-article {
        margin-bottom: 65px;
    }

    .moledro-blog-page .page-section {
        margin-bottom: 65px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-blog-page .page-main-container {
        padding: 0 18px;
    }

    .moledro-blog-page .page-main {
        padding: 40px 0 65px;
    }

    .moledro-blog-page .blog-intro {
        margin-bottom: 30px;
    }

    .moledro-blog-page .blog-meta {
        gap: 10px;
        margin-bottom: 20px;
    }

    .moledro-blog-page .blog-meta-category {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-blog-page .blog-meta-item {
        padding-left: 10px;
        font-size: 11px;
    }

    .moledro-blog-page .blog-meta-item span {
        display: none;
    }

    .moledro-blog-page .blog-title {
        font-size: 32px;
        letter-spacing: -.8px;
    }

    .moledro-blog-page .blog-lead {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.85;
    }

    .moledro-blog-page .blog-intro-accent {
        margin-top: 23px;
    }

    .moledro-blog-page .blog-cover {
        margin-bottom: 45px;
        border-radius: 12px;
    }

    .moledro-blog-page .blog-cover img {
        aspect-ratio: 4 / 3;
    }

    .moledro-blog-page .blog-article {
        margin-bottom: 50px;
    }

    .moledro-blog-page .blog-article-inner {
        font-size: 14px;
        line-height: 1.9;
    }

    .moledro-blog-page .blog-article-inner h2 {
        font-size: 24px;
    }

    .moledro-blog-page .blog-article-inner h3 {
        font-size: 21px;
    }

    .moledro-blog-page .blog-article-inner p {
        font-size: 14px;
        line-height: 1.9;
    }

    .moledro-blog-page .blog-article-inner blockquote {
        padding: 20px;
        font-size: 15px;
    }

    .moledro-blog-page .page-section {
        margin-bottom: 50px;
    }

    .moledro-blog-page .blog-slides {
        border-radius: 12px;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   ACCORDION COMPONENT | FINAL CSS
============================================================ */

.moledro-accordions {
    --acc-blue: #4db4dc;
    --acc-pink: #d52c83;
    --acc-dark: #17191d;
    --acc-text: #4d5562;
    --acc-muted: #747d89;
    --acc-border: #e8eaee;

    width: 100%;
}

/* ACCORDION CONTAINER */

.moledro-accordions .page-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ACCORDION ITEM */

.moledro-accordions .page-accordion-item {
    overflow: hidden;
    border: 1px solid var(--acc-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .25s ease,
            box-shadow .25s ease;
}

.moledro-accordions .page-accordion-item:first-of-type,
.moledro-accordions .page-accordion-item:last-of-type {
    border-radius: 12px;
}

.moledro-accordions .page-accordion-item:has(.page-accordion-button:not(.collapsed)) {
    border-color: #d4eaf4;
    box-shadow: 0 8px 30px rgba(23,25,29,.035);
}

/* HEADER */

.moledro-accordions .accordion-header {
    margin: 0;
    padding: 0;
}

/* BUTTON */

.moledro-accordions .page-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 22px 26px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--acc-dark);
    box-shadow: none;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
    cursor: pointer;
    transition:
            background .2s ease,
            color .2s ease;
}

.moledro-accordions .page-accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--acc-dark);
    box-shadow: none;
}

.moledro-accordions .page-accordion-button:hover {
    background: #fafbfc;
}

.moledro-accordions .page-accordion-button:focus {
    box-shadow: none;
}

.moledro-accordions .page-accordion-button:focus-visible {
    outline: 2px solid var(--acc-blue);
    outline-offset: -3px;
}

/* DISABLE BOOTSTRAP DEFAULT ARROW */

.moledro-accordions .page-accordion-button::after {
    display: none;
    content: none;
}

/* TITLE */

.moledro-accordions .page-accordion-title {
    display: block;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* CUSTOM PLUS / MINUS ICON */

.moledro-accordions .moledro-accordion-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid #e8eaee;
    border-radius: 9px;
    background: #f7f8fa;
    transition:
            background .25s ease,
            border-color .25s ease;
}

.moledro-accordions .moledro-accordion-icon::before,
.moledro-accordions .moledro-accordion-icon::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--acc-dark);
    transition:
            background .25s ease,
            transform .25s ease;
}

.moledro-accordions .moledro-accordion-icon::after {
    transform: rotate(90deg);
}

/* OPEN STATE */

.moledro-accordions .page-accordion-button:not(.collapsed) .moledro-accordion-icon {
    border-color: var(--acc-blue);
    background: var(--acc-blue);
}

.moledro-accordions .page-accordion-button:not(.collapsed) .moledro-accordion-icon::before,
.moledro-accordions .page-accordion-button:not(.collapsed) .moledro-accordion-icon::after {
    background: #fff;
}

.moledro-accordions .page-accordion-button:not(.collapsed) .moledro-accordion-icon::after {
    transform: rotate(0deg);
}

/* BODY */

.moledro-accordions .page-accordion-body {
    padding: 0 26px 26px;
    background: #fff;
}

/* DESCRIPTION */

.moledro-accordions .page-accordion-description {
    padding-top: 20px;
    border-top: 1px solid var(--acc-border);
    color: var(--acc-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.moledro-accordions .page-accordion-description p {
    margin: 0 0 15px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-accordions .page-accordion-description p:last-child {
    margin-bottom: 0;
}

.moledro-accordions .page-accordion-description a {
    color: var(--acc-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-accordions .page-accordion-description a:hover {
    color: var(--acc-pink);
}

.moledro-accordions .page-accordion-description ul,
.moledro-accordions .page-accordion-description ol {
    margin: 12px 0;
    padding-left: 22px;
}

.moledro-accordions .page-accordion-description li {
    margin-bottom: 7px;
}

.moledro-accordions .page-accordion-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* TABLET */

@media (max-width: 991.98px) {

    .moledro-accordions .page-accordion-button {
        min-height: 70px;
        padding: 20px 22px;
        font-size: 15px;
    }

    .moledro-accordions .page-accordion-body {
        padding: 0 22px 22px;
    }
}

/* MOBILE */

@media (max-width: 575.98px) {

    .moledro-accordions .page-accordion {
        gap: 10px;
    }

    .moledro-accordions .page-accordion-item,
    .moledro-accordions .page-accordion-item:first-of-type,
    .moledro-accordions .page-accordion-item:last-of-type {
        border-radius: 10px;
    }

    .moledro-accordions .page-accordion-button {
        gap: 14px;
        min-height: 64px;
        padding: 17px 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .moledro-accordions .moledro-accordion-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .moledro-accordions .page-accordion-body {
        padding: 0 16px 20px;
    }

    .moledro-accordions .page-accordion-description {
        padding-top: 16px;
        font-size: 13px;
        line-height: 1.85;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-accordions .page-accordion-item,
    .moledro-accordions .page-accordion-button,
    .moledro-accordions .moledro-accordion-icon,
    .moledro-accordions .moledro-accordion-icon::before,
    .moledro-accordions .moledro-accordion-icon::after {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   BREADCRUMB COMPONENT | FINAL CSS
============================================================ */

.moledro-breadcrumb {
    --bc-blue: #4db4dc;
    --bc-text: #747d89;
    --bc-current: #303640;
    --bc-separator: #aeb5be;

    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   INNER CONTAINER
============================================================ */

.moledro-breadcrumb .page-breadcrumb-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ============================================================
   HOME LINK
============================================================ */

.moledro-breadcrumb .page-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--bc-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
    transition: color .2s ease;
}

.moledro-breadcrumb .page-breadcrumb-home i {
    font-size: 14px;
    line-height: 1;
}

.moledro-breadcrumb .page-breadcrumb-home:hover {
    color: var(--bc-blue);
}

/* ============================================================
   PARENT LINKS
============================================================ */

.moledro-breadcrumb .page-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--bc-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.moledro-breadcrumb .page-breadcrumb-link:hover {
    color: var(--bc-blue);
}

/* ============================================================
   SEPARATORS
============================================================ */

.moledro-breadcrumb .page-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bc-separator);
    font-size: 9px;
    line-height: 1;
}

.moledro-breadcrumb .page-breadcrumb-separator i {
    font-size: inherit;
}

/* ============================================================
   CURRENT PAGE
============================================================ */

.moledro-breadcrumb .page-breadcrumb-current {
    min-width: 0;
    color: var(--bc-current);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ============================================================
   DARK HERO COMPATIBILITY
============================================================ */

.page-hero .moledro-breadcrumb,
.page-header .moledro-breadcrumb,
.hero-section .moledro-breadcrumb {
    --bc-text: #aeb6c2;
    --bc-current: #ffffff;
    --bc-separator: #69727f;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-breadcrumb .page-breadcrumb-inner {
        gap: 7px;
    }

    .moledro-breadcrumb .page-breadcrumb-home,
    .moledro-breadcrumb .page-breadcrumb-link,
    .moledro-breadcrumb .page-breadcrumb-current {
        font-size: 11px;
        line-height: 1.6;
    }

    .moledro-breadcrumb .page-breadcrumb-home {
        gap: 6px;
    }

    .moledro-breadcrumb .page-breadcrumb-home i {
        font-size: 13px;
    }

    .moledro-breadcrumb .page-breadcrumb-separator {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-breadcrumb .page-breadcrumb-home,
    .moledro-breadcrumb .page-breadcrumb-link {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   CODE BLOCK COMPONENT | FINAL CSS
============================================================ */

.moledro-page-codes {
    --code-blue: #4db4dc;
    --code-pink: #d52c83;
    --code-yellow: #e8c51d;
    --code-dark: #17191d;
    --code-text: #303640;
    --code-muted: #747d89;
    --code-border: #e8eaee;

    width: 100%;
}

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

.moledro-page-codes .page-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.moledro-page-codes .page-section-heading-content {
    min-width: 0;
}

.moledro-page-codes .page-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--code-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-page-codes .moledro-code-kicker-line {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--code-blue);
}

.moledro-page-codes .page-section-heading h2 {
    margin: 0;
    color: var(--code-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-page-codes .page-section-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--code-border);
    border-radius: 10px;
    background: #f7f8fa;
    color: var(--code-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

/* ============================================================
   CODE LIST
============================================================ */

.moledro-page-codes .page-codes-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.moledro-page-codes .page-code-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--code-border);
    border-radius: 14px;
    background: #fff;
}

/* ============================================================
   CODE ITEM HEADER
============================================================ */

.moledro-page-codes .page-code-header {
    padding: 26px 28px;
    background: #fff;
}

.moledro-page-codes .page-code-heading h3 {
    margin: 0;
    color: var(--code-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.moledro-page-codes .page-code-heading p {
    margin: 10px 0 0;
    color: var(--code-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.85;
}

/* ============================================================
   CODE BOX
============================================================ */

.moledro-page-codes .page-code-box {
    min-width: 0;
    overflow: hidden;
    background: #17191d;
}

/* TOOLBAR */

.moledro-page-codes .page-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 54px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #202329;
}

.moledro-page-codes .page-code-language {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #aeb8c5;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.moledro-page-codes .page-code-language i {
    color: var(--code-blue);
    font-size: 16px;
}

/* COPY BUTTON */

.moledro-page-codes .page-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: rgba(255,255,255,.05);
    color: #e7ebf0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-page-codes .page-code-copy i {
    font-size: 13px;
}

.moledro-page-codes .page-code-copy:hover {
    border-color: var(--code-blue);
    background: var(--code-blue);
    color: #fff;
}

.moledro-page-codes .page-code-copy:focus-visible {
    outline: 2px solid var(--code-blue);
    outline-offset: 3px;
}

/* ============================================================
   CODE CONTENT
============================================================ */

.moledro-page-codes .page-code-box pre {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 25px 28px;
    overflow-x: auto;
    background: transparent;
    color: #d9e1ea;
    font-family:
            'JetBrains Mono',
            'Fira Code',
            Consolas,
            monospace;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.85;
    tab-size: 4;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: #505966 #17191d;
}

.moledro-page-codes .page-code-box code {
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: inherit;
}

.moledro-page-codes .page-code-box pre::-webkit-scrollbar {
    height: 7px;
}

.moledro-page-codes .page-code-box pre::-webkit-scrollbar-track {
    background: #17191d;
}

.moledro-page-codes .page-code-box pre::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #505966;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-codes .page-code-header {
        padding: 22px 24px;
    }

    .moledro-page-codes .page-code-box pre {
        padding: 22px 24px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-page-codes .page-section-heading {
        gap: 15px;
        margin-bottom: 24px;
    }

    .moledro-page-codes .page-section-kicker {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-page-codes .moledro-code-kicker-line {
        width: 20px;
    }

    .moledro-page-codes .page-section-heading h2 {
        font-size: 27px;
    }

    .moledro-page-codes .page-section-count {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .moledro-page-codes .page-codes-list {
        gap: 18px;
    }

    .moledro-page-codes .page-code-item {
        border-radius: 10px;
    }

    .moledro-page-codes .page-code-header {
        padding: 20px 18px;
    }

    .moledro-page-codes .page-code-heading h3 {
        font-size: 17px;
    }

    .moledro-page-codes .page-code-heading p {
        font-size: 13px;
        line-height: 1.75;
    }

    .moledro-page-codes .page-code-toolbar {
        min-height: 50px;
        padding: 9px 14px;
    }

    .moledro-page-codes .page-code-box pre {
        padding: 18px 16px;
        font-size: 12px;
        line-height: 1.8;
    }

    .moledro-page-codes .page-code-copy {
        min-height: 32px;
        padding: 6px 11px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-page-codes .page-code-copy {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   CONTACTS COMPONENT | FINAL CSS
============================================================ */

.moledro-page-contacts {
    --contact-blue: #4db4dc;
    --contact-pink: #d52c83;
    --contact-yellow: #e8c51d;
    --contact-dark: #17191d;
    --contact-text: #4d5562;
    --contact-muted: #747d89;
    --contact-border: #e8eaee;
    --contact-bg: #f7f8fa;

    width: 100%;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-page-contacts .page-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 35px;
}

.moledro-page-contacts .page-section-heading-content {
    min-width: 0;
}

.moledro-page-contacts .page-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--contact-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-page-contacts .moledro-contact-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 2px;
    background: var(--contact-blue);
}

.moledro-page-contacts .page-section-heading h2 {
    margin: 0;
    color: var(--contact-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(29px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-page-contacts .moledro-contacts-intro {
    max-width: 650px;
    margin: 15px 0 0;
    color: var(--contact-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.85;
}

.moledro-page-contacts .moledro-contacts-count {
    flex-shrink: 0;
    padding: 9px 13px;
    border: 1px solid var(--contact-border);
    border-radius: 7px;
    color: var(--contact-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   CONTACT GRID
============================================================ */

.moledro-page-contacts .page-contacts-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* ============================================================
   CONTACT CARD
============================================================ */

.moledro-page-contacts .page-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--contact-border);
    border-radius: 16px;
    background: #fff;
}

.moledro-page-contacts .page-contact-card:not(:has(.page-contact-map)) {
    grid-template-columns: minmax(0, 1fr);
}

.moledro-page-contacts .moledro-contact-main {
    min-width: 0;
    padding: 32px;
}

/* ============================================================
   CONTACT IMAGE
============================================================ */

.moledro-page-contacts .page-contact-image {
    width: 100%;
    max-height: 235px;
    margin-bottom: 27px;
    overflow: hidden;
    border-radius: 11px;
    background: var(--contact-bg);
}

.moledro-page-contacts .page-contact-image img {
    display: block;
    width: 100%;
    height: 235px;
    object-fit: cover;
}

/* ============================================================
   CONTACT CONTENT
============================================================ */

.moledro-page-contacts .page-contact-content {
    min-width: 0;
}

.moledro-page-contacts .moledro-contact-heading {
    margin-bottom: 25px;
}

.moledro-page-contacts .page-contact-title {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--contact-blue);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.moledro-page-contacts .page-contact-content h3 {
    margin: 0;
    color: var(--contact-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.6px;
}

/* ============================================================
   CONTACT DETAILS
============================================================ */

.moledro-page-contacts .page-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.moledro-page-contacts .page-contact-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--contact-border);
    color: inherit;
    text-decoration: none;
}

.moledro-page-contacts .page-contact-detail:first-child {
    padding-top: 0;
}

.moledro-page-contacts .page-contact-detail:last-child {
    border-bottom: 0;
}

.moledro-page-contacts .page-contact-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid #e5edf2;
    border-radius: 10px;
    background: #f3f9fc;
    color: var(--contact-blue);
    transition:
            background .2s ease,
            color .2s ease;
}

.moledro-page-contacts .page-contact-detail-icon i {
    font-size: 17px;
}

.moledro-page-contacts .page-contact-detail-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.moledro-page-contacts .page-contact-detail-text small {
    color: var(--contact-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.moledro-page-contacts .page-contact-detail-text strong {
    color: var(--contact-dark);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.moledro-page-contacts a.page-contact-detail:hover .page-contact-detail-icon {
    background: var(--contact-blue);
    color: #fff;
}

.moledro-page-contacts a.page-contact-detail:hover .page-contact-detail-text strong {
    color: var(--contact-blue);
}

.moledro-page-contacts .moledro-detail-arrow {
    flex-shrink: 0;
    color: #b8c0ca;
    font-size: 13px;
    transition:
            color .2s ease,
            transform .2s ease;
}

.moledro-page-contacts a.page-contact-detail:hover .moledro-detail-arrow {
    color: var(--contact-blue);
    transform: translate(2px, -2px);
}

/* ============================================================
   MAP BUTTON
============================================================ */

.moledro-page-contacts .page-contact-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 45px;
    margin-top: 25px;
    padding: 12px 17px;
    border: 1px solid var(--contact-blue);
    border-radius: 8px;
    background: var(--contact-blue);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.moledro-page-contacts .page-contact-map-button:hover {
    border-color: #2998c5;
    background: #2998c5;
    color: #fff;
    transform: translateY(-2px);
}

.moledro-page-contacts .page-contact-map-button i {
    font-size: 14px;
}

/* ============================================================
   GOOGLE MAP
============================================================ */

.moledro-page-contacts .page-contact-map {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    background: #eef2f5;
}

.moledro-page-contacts .page-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

/* ============================================================
   MAP PLACEHOLDER
============================================================ */

.moledro-page-contacts .moledro-contact-map-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    background:
            radial-gradient(
                    circle at 25% 30%,
                    rgba(77,180,220,.09),
                    transparent 40%
            ),
            #f5f7f9;
}

.moledro-page-contacts .moledro-map-placeholder {
    max-width: 280px;
    text-align: center;
}

.moledro-page-contacts .moledro-map-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    border: 1px solid #d9eaf2;
    border-radius: 16px;
    background: #fff;
    color: var(--contact-blue);
    font-size: 26px;
}

.moledro-page-contacts .moledro-map-placeholder strong {
    display: block;
    margin-bottom: 10px;
    color: var(--contact-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.moledro-page-contacts .moledro-map-placeholder p {
    margin: 0;
    color: var(--contact-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

.moledro-page-contacts .moledro-map-placeholder a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: var(--contact-blue);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.moledro-page-contacts .moledro-map-placeholder a:hover {
    color: var(--contact-pink);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-contacts .page-contact-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .moledro-page-contacts .moledro-contact-main {
        padding: 28px;
    }

    .moledro-page-contacts .page-contact-map,
    .moledro-page-contacts .page-contact-map iframe {
        min-height: 330px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-page-contacts .page-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 26px;
    }

    .moledro-page-contacts .page-section-kicker {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-page-contacts .moledro-contact-kicker-line {
        width: 20px;
    }

    .moledro-page-contacts .page-section-heading h2 {
        font-size: 29px;
    }

    .moledro-page-contacts .moledro-contacts-intro {
        font-size: 13px;
    }

    .moledro-page-contacts .page-contacts-grid {
        gap: 20px;
    }

    .moledro-page-contacts .page-contact-card {
        border-radius: 12px;
    }

    .moledro-page-contacts .moledro-contact-main {
        padding: 19px;
    }

    .moledro-page-contacts .page-contact-image {
        max-height: 185px;
        margin-bottom: 22px;
    }

    .moledro-page-contacts .page-contact-image img {
        height: 185px;
    }

    .moledro-page-contacts .page-contact-content h3 {
        font-size: 22px;
    }

    .moledro-page-contacts .page-contact-detail {
        gap: 11px;
        padding: 13px 0;
    }

    .moledro-page-contacts .page-contact-detail-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .moledro-page-contacts .page-contact-detail-text strong {
        font-size: 12px;
    }

    .moledro-page-contacts .page-contact-map-button {
        width: 100%;
        margin-top: 20px;
    }

    .moledro-page-contacts .page-contact-map,
    .moledro-page-contacts .page-contact-map iframe {
        min-height: 270px;
    }

    .moledro-page-contacts .moledro-contact-map-fallback {
        padding: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-page-contacts .page-contact-detail-icon,
    .moledro-page-contacts .moledro-detail-arrow,
    .moledro-page-contacts .page-contact-map-button {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE CONTENTS COMPONENT | FINAL CSS
============================================================ */

.moledro-page-contents {
    --content-blue: #4db4dc;
    --content-pink: #d52c83;
    --content-yellow: #e8c51d;
    --content-dark: #17191d;
    --content-text: #4d5562;
    --content-muted: #747d89;
    --content-border: #e8eaee;
    --content-bg: #f7f8fa;

    width: 100%;
    min-width: 0;
}

/* ============================================================
   CONTENT LIST
============================================================ */

.moledro-page-contents .page-contents-list {
    display: flex;
    flex-direction: column;
    gap: 55px;
    width: 100%;
    min-width: 0;
}

/* ============================================================
   CONTENT BLOCK
============================================================ */

.moledro-page-contents .page-content-block {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.moledro-page-contents .page-content-block + .page-content-block {
    padding-top: 50px;
    border-top: 1px solid var(--content-border);
}

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

.moledro-page-contents .page-content-header {
    margin-bottom: 27px;
}

.moledro-page-contents .moledro-content-accent {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 19px;
}

.moledro-page-contents .moledro-content-accent span {
    display: block;
    height: 3px;
    border-radius: 4px;
}

.moledro-page-contents .moledro-content-accent span:nth-child(1) {
    width: 35px;
    background: var(--content-blue);
}

.moledro-page-contents .moledro-content-accent span:nth-child(2) {
    width: 17px;
    background: var(--content-pink);
}

.moledro-page-contents .moledro-content-accent span:nth-child(3) {
    width: 9px;
    background: var(--content-yellow);
}

.moledro-page-contents .page-content-header h2 {
    margin: 0;
    color: var(--content-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
}

/* ============================================================
   CONTENT BODY
============================================================ */

.moledro-page-contents .page-content-body {
    width: 100%;
    min-width: 0;
    color: var(--content-text);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.moledro-page-contents .page-content-body p {
    margin: 0 0 20px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-page-contents .page-content-body p:last-child {
    margin-bottom: 0;
}

/* HEADINGS */

.moledro-page-contents .page-content-body h1,
.moledro-page-contents .page-content-body h2,
.moledro-page-contents .page-content-body h3,
.moledro-page-contents .page-content-body h4,
.moledro-page-contents .page-content-body h5,
.moledro-page-contents .page-content-body h6 {
    margin: 32px 0 16px;
    color: var(--content-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.4px;
}

.moledro-page-contents .page-content-body h1 {
    font-size: 32px;
}

.moledro-page-contents .page-content-body h2 {
    font-size: 27px;
}

.moledro-page-contents .page-content-body h3 {
    font-size: 23px;
}

.moledro-page-contents .page-content-body h4 {
    font-size: 20px;
}

.moledro-page-contents .page-content-body h5 {
    font-size: 18px;
}

.moledro-page-contents .page-content-body h6 {
    font-size: 16px;
}

/* LINKS */

.moledro-page-contents .page-content-body a {
    color: var(--content-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.moledro-page-contents .page-content-body a:hover {
    color: var(--content-pink);
}

/* BOLD / EMPHASIS */

.moledro-page-contents .page-content-body strong,
.moledro-page-contents .page-content-body b {
    color: var(--content-dark);
    font-weight: 700;
}

/* LISTS */

.moledro-page-contents .page-content-body ul,
.moledro-page-contents .page-content-body ol {
    margin: 0 0 24px;
    padding-left: 25px;
}

.moledro-page-contents .page-content-body li {
    margin-bottom: 9px;
    line-height: 1.85;
}

.moledro-page-contents .page-content-body li::marker {
    color: var(--content-blue);
}

/* IMAGES */

.moledro-page-contents .page-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* FIGURES */

.moledro-page-contents .page-content-body figure {
    max-width: 100%;
    margin: 25px 0;
}

.moledro-page-contents .page-content-body figcaption {
    margin-top: 10px;
    color: var(--content-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* BLOCKQUOTE */

.moledro-page-contents .page-content-body blockquote {
    margin: 30px 0;
    padding: 25px 28px;
    border-left: 3px solid var(--content-blue);
    border-radius: 0 10px 10px 0;
    background: var(--content-bg);
    color: var(--content-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}

.moledro-page-contents .page-content-body blockquote p {
    color: inherit;
}

/* TABLES */

.moledro-page-contents .page-content-body table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.moledro-page-contents .page-content-body th,
.moledro-page-contents .page-content-body td {
    padding: 13px 16px;
    border: 1px solid var(--content-border);
    text-align: left;
    vertical-align: middle;
}

.moledro-page-contents .page-content-body th {
    background: var(--content-bg);
    color: var(--content-dark);
    font-weight: 700;
}

/* HORIZONTAL LINE */

.moledro-page-contents .page-content-body hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid var(--content-border);
    opacity: 1;
}

/* VIDEO / IFRAME */

.moledro-page-contents .page-content-body iframe,
.moledro-page-contents .page-content-body video {
    max-width: 100%;
    border-radius: 10px;
}

/* CODE */

.moledro-page-contents .page-content-body pre {
    max-width: 100%;
    margin: 25px 0;
    padding: 20px 23px;
    overflow-x: auto;
    border-radius: 10px;
    background: #17191d;
    color: #e3e9f0;
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.8;
}

.moledro-page-contents .page-content-body code {
    font-family: Consolas, monospace;
    font-size: .92em;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-contents .page-contents-list {
        gap: 45px;
    }

    .moledro-page-contents .page-content-block + .page-content-block {
        padding-top: 40px;
    }

    .moledro-page-contents .page-content-header h2 {
        font-size: 30px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-page-contents .page-contents-list {
        gap: 35px;
    }

    .moledro-page-contents .page-content-block + .page-content-block {
        padding-top: 32px;
    }

    .moledro-page-contents .page-content-header {
        margin-bottom: 20px;
    }

    .moledro-page-contents .moledro-content-accent {
        margin-bottom: 15px;
    }

    .moledro-page-contents .page-content-header h2 {
        font-size: 25px;
        letter-spacing: -.5px;
    }

    .moledro-page-contents .page-content-body {
        font-size: 14px;
        line-height: 1.9;
    }

    .moledro-page-contents .page-content-body h1 {
        font-size: 27px;
    }

    .moledro-page-contents .page-content-body h2 {
        font-size: 24px;
    }

    .moledro-page-contents .page-content-body h3 {
        font-size: 21px;
    }

    .moledro-page-contents .page-content-body h4 {
        font-size: 18px;
    }

    .moledro-page-contents .page-content-body blockquote {
        padding: 20px;
        font-size: 14px;
    }

    .moledro-page-contents .page-content-body th,
    .moledro-page-contents .page-content-body td {
        padding: 10px 12px;
        font-size: 12px;
    }

    .moledro-page-contents .page-content-body img {
        border-radius: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-page-contents .page-content-body a {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   DOCUMENTS COMPONENT | FINAL CSS
============================================================ */

.moledro-page-documents {
    --doc-blue: #4db4dc;
    --doc-pink: #d52c83;
    --doc-yellow: #e8c51d;
    --doc-dark: #17191d;
    --doc-text: #4d5562;
    --doc-muted: #747d89;
    --doc-border: #e8eaee;
    --doc-bg: #f7f8fa;

    width: 100%;
    min-width: 0;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-page-documents .page-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
}

.moledro-page-documents .page-section-heading-content {
    min-width: 0;
}

.moledro-page-documents .page-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--doc-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-page-documents .moledro-document-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 2px;
    background: var(--doc-blue);
}

.moledro-page-documents .page-section-heading h2 {
    margin: 0;
    color: var(--doc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-page-documents .moledro-documents-intro {
    margin: 13px 0 0;
    color: var(--doc-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

.moledro-page-documents .page-section-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--doc-border);
    border-radius: 10px;
    background: var(--doc-bg);
    color: var(--doc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

/* ============================================================
   DOCUMENT LIST
============================================================ */

.moledro-page-documents .page-documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ============================================================
   DOCUMENT ITEM
============================================================ */

.moledro-page-documents .page-document-item {
    display: flex;
    align-items: center;
    gap: 23px;
    width: 100%;
    min-width: 0;
    padding: 22px 25px;
    border: 1px solid var(--doc-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
}

.moledro-page-documents .page-document-item:hover {
    border-color: #d7eaf3;
    box-shadow: 0 10px 30px rgba(23,25,29,.045);
    transform: translateY(-2px);
}

/* ============================================================
   FILE ICON
============================================================ */

.moledro-page-documents .page-document-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    border: 1px solid #e3edf3;
    border-radius: 12px;
    background: #f2f9fc;
    color: var(--doc-blue);
}

.moledro-page-documents .page-document-icon i {
    font-size: 29px;
    line-height: 1;
}

/* FILE TYPE COLORS */

.moledro-page-documents .page-document-icon:has(.bi-file-earmark-pdf) {
    border-color: #f8e3e5;
    background: #fff3f3;
    color: #d84c57;
}

.moledro-page-documents .page-document-icon:has(.bi-file-earmark-word) {
    border-color: #dceaf9;
    background: #f1f7ff;
    color: #347fc5;
}

.moledro-page-documents .page-document-icon:has(.bi-file-earmark-excel) {
    border-color: #dcefe4;
    background: #f0faf4;
    color: #269565;
}

.moledro-page-documents .page-document-icon:has(.bi-file-earmark-zip) {
    border-color: #f4e9cf;
    background: #fffaf0;
    color: #b58b2d;
}

/* ============================================================
   DOCUMENT CONTENT
============================================================ */

.moledro-page-documents .page-document-content {
    flex: 1;
    min-width: 0;
}

/* META */

.moledro-page-documents .page-document-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 9px;
}

.moledro-page-documents .page-document-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 5px;
    background: #edf7fb;
    color: #329bc4;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
}

.moledro-page-documents .page-document-original-name {
    min-width: 0;
    color: #9aa2ad;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* TITLE */

.moledro-page-documents .page-document-content h3 {
    margin: 0;
    color: var(--doc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* DESCRIPTION */

.moledro-page-documents .page-document-content p {
    margin: 8px 0 0;
    color: var(--doc-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
}

/* ============================================================
   DOWNLOAD ACTION
============================================================ */

.moledro-page-documents .page-document-action {
    flex-shrink: 0;
    margin-left: auto;
}

.moledro-page-documents .page-document-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-width: 112px;
    min-height: 43px;
    padding: 11px 17px;
    border: 1px solid var(--doc-blue);
    border-radius: 8px;
    background: var(--doc-blue);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.moledro-page-documents .page-document-download i {
    font-size: 15px;
}

.moledro-page-documents .page-document-download:hover {
    border-color: #2998c5;
    background: #2998c5;
    color: #fff;
    transform: translateY(-2px);
}

.moledro-page-documents .page-document-download:focus-visible {
    outline: 2px solid var(--doc-dark);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-documents .page-document-item {
        gap: 18px;
        padding: 20px;
    }

    .moledro-page-documents .page-document-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

    .moledro-page-documents .page-document-icon i {
        font-size: 26px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-page-documents .page-section-heading {
        gap: 15px;
        margin-bottom: 24px;
    }

    .moledro-page-documents .page-section-kicker {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-page-documents .moledro-document-kicker-line {
        width: 20px;
    }

    .moledro-page-documents .page-section-heading h2 {
        font-size: 29px;
    }

    .moledro-page-documents .moledro-documents-intro {
        font-size: 13px;
    }

    .moledro-page-documents .page-section-count {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .moledro-page-documents .page-documents-list {
        gap: 12px;
    }

    .moledro-page-documents .page-document-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 17px;
        border-radius: 10px;
    }

    .moledro-page-documents .page-document-icon {
        width: 48px;
        height: 48px;
        border-radius: 9px;
    }

    .moledro-page-documents .page-document-icon i {
        font-size: 23px;
    }

    .moledro-page-documents .page-document-content h3 {
        font-size: 14px;
    }

    .moledro-page-documents .page-document-content p {
        font-size: 12px;
    }

    .moledro-page-documents .page-document-action {
        grid-column: 1 / -1;
        width: 100%;
        margin: 5px 0 0;
    }

    .moledro-page-documents .page-document-download {
        width: 100%;
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-page-documents .page-document-item,
    .moledro-page-documents .page-document-download {
        transition: none;
    }
}
/* ============================================================
   MOLEDRO | PAGE HERO COMPONENT
   Add to the end of site.css. PHP contains no inline CSS.
============================================================ */
:where(.moledro-hero) {
    --mh-blue: #4db4dc;
    --mh-pink: #d52c83;
    --mh-yellow: #e8c51d;
    --mh-dark: #17191d;
    --mh-muted: #79818c;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    width: calc(100% - 30px);
    max-width: 1480px;
    margin: 25px auto 0;
    overflow: hidden;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
}
.moledro-hero * { box-sizing: border-box; }
/* Standard hero */
.page-hero-default.moledro-hero {
    min-height: 370px;
    background-color: #17191d;
    background-image: radial-gradient(circle at 88% 20%,rgba(77,180,220,.17),transparent 35%);
    background-position: center;
    background-size: cover;
    color: #fff;
}
.page-hero-default.moledro-hero .page-hero-image-overlay {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg,rgba(15,18,23,.96),rgba(15,18,23,.75) 55%,rgba(15,18,23,.36));
}
.page-hero-default.moledro-hero .page-hero-decoration {
    position: absolute; right: -70px; bottom: -140px;
    width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%; pointer-events: none;
}
.page-hero-default.moledro-hero .page-hero-decoration::after {
    content: ''; position: absolute; inset: 60px;
    border: 1px solid rgba(77,180,220,.2); border-radius: 50%;
}
.page-hero-default.moledro-hero .page-hero-container {
    position: relative; z-index: 1; display: flex; align-items: center;
    min-height: 370px; padding: 48px clamp(24px,5vw,75px);
}
.page-hero-default.moledro-hero .page-hero-inner { width: 100%; }
.page-hero-default.moledro-hero .page-hero-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 11px;
    margin-bottom: 38px; color: #c5cad1; font-size: 12px;
}
.page-hero-default.moledro-hero .page-hero-breadcrumb a { color: #c5cad1; text-decoration: none; }
.page-hero-default.moledro-hero .page-hero-breadcrumb a:hover { color: var(--mh-blue); }
.page-hero-default.moledro-hero .page-hero-breadcrumb > i { font-size: 10px; opacity: .5; }
.page-hero-default.moledro-hero .page-hero-breadcrumb > span { color: #fff; }
.page-hero-default.moledro-hero .page-hero-content { max-width: 850px; }
.page-hero-default.moledro-hero .page-hero-kicker {
    margin-bottom: 15px; color: var(--mh-blue); font-size: 11px;
    font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.page-hero-default.moledro-hero h1 {
    margin: 0 0 18px; color: #fff; font: 800 clamp(34px,4.5vw,62px)/1.12 'Manrope',sans-serif;
    letter-spacing: -1.8px; overflow-wrap: anywhere;
}
.page-hero-default.moledro-hero .page-hero-content p {
    max-width: 650px; margin: 0; color: #b8c0cc; font-size: 15px; line-height: 1.85;
}
/* Shared title / breadcrumb rules */
.page-hero-news.moledro-hero,
.page-hero-catalog.moledro-hero,
.page-hero-custom.moledro-hero { background: #17191d; color: #fff; }
.page-hero-news.moledro-hero h1,
.page-hero-blog.moledro-hero h1,
.page-hero-catalog.moledro-hero h1,
.page-hero-custom.moledro-hero h1 {
    margin: 0 0 19px; font: 800 clamp(34px,4.5vw,58px)/1.13 'Manrope',sans-serif;
    letter-spacing: -1.7px; overflow-wrap: anywhere;
}
.page-hero-news.moledro-hero h1,
.page-hero-catalog.moledro-hero h1,
.page-hero-custom.moledro-hero h1 { color: #fff; }
.page-hero-news.moledro-hero a,
.page-hero-catalog.moledro-hero a,
.page-hero-custom.moledro-hero a { color: #c3cbd5; text-decoration: none; }
.page-hero-news.moledro-hero a:hover,
.page-hero-catalog.moledro-hero a:hover,
.page-hero-custom.moledro-hero a:hover { color: var(--mh-blue); }
/* News: dark photo feature */
.page-hero-news.moledro-hero {
    min-height: 430px; background-position: center; background-size: cover;
}
.page-hero-news.moledro-hero .page-hero-news-overlay {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg,rgba(13,17,23,.97),rgba(13,17,23,.8) 55%,rgba(13,17,23,.28));
}
.page-hero-news.moledro-hero .page-hero-news-container {
    position: relative; z-index: 1; display: flex; align-items: flex-end;
    min-height: 430px; padding: 58px clamp(24px,5vw,75px);
}
.page-hero-news.moledro-hero .page-hero-news-content { max-width: 880px; }
.page-hero-news.moledro-hero .page-hero-news-top,
.page-hero-catalog.moledro-hero .page-hero-catalog-breadcrumb,
.page-hero-custom.moledro-hero .page-hero-custom-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 11px;
    margin-bottom: 40px; color: #a9b3c0; font-size: 12px;
}
.page-hero-news.moledro-hero .page-hero-news-label,
.page-hero-catalog.moledro-hero .page-hero-catalog-label,
.page-hero-custom.moledro-hero .page-hero-custom-label {
    display: flex; align-items: center; gap: 11px; margin-bottom: 17px;
    color: var(--mh-blue); font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
}
.page-hero-news.moledro-hero .page-hero-news-label span {
    display: block; width: 27px; height: 2px; background: var(--mh-blue);
}
.page-hero-news.moledro-hero .page-hero-news-meta {
    display: flex; align-items: center; gap: 9px; margin-top: 22px;
    color: #b5beca; font-size: 13px;
}
/* Blog: light editorial */
.page-hero-blog.moledro-hero {
    padding: clamp(30px,5vw,70px); background: #f5f7f9;
}
.page-hero-blog.moledro-hero .page-hero-blog-container {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,390px);
    align-items: center; gap: clamp(25px,4vw,60px);
}
.page-hero-blog.moledro-hero .page-hero-blog-content { min-width: 0; }
.page-hero-blog.moledro-hero .page-hero-blog-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 32px; color: #788391; font-size: 12px;
}
.page-hero-blog.moledro-hero .page-hero-blog-breadcrumb a { color: #65707d; text-decoration: none; }
.page-hero-blog.moledro-hero .page-hero-blog-breadcrumb a:hover { color: var(--mh-blue); }
.page-hero-blog.moledro-hero .page-hero-blog-label {
    margin-bottom: 15px; color: var(--mh-pink); font-size: 11px;
    font-weight: 800; letter-spacing: 1.8px;
}
.page-hero-blog.moledro-hero h1 { color: var(--mh-dark); }
.page-hero-blog.moledro-hero p {
    max-width: 650px; margin: 0 0 25px; color: #67717e; font-size: 15px; line-height: 1.8;
}
.page-hero-blog.moledro-hero .page-hero-blog-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 22px;
    color: #77818c; font-size: 12px;
}
.page-hero-blog.moledro-hero .page-hero-blog-meta span { display: inline-flex; align-items: center; gap: 8px; }
.page-hero-blog.moledro-hero .page-hero-blog-image {
    height: 330px; overflow: hidden; border-radius: 14px;
}
.page-hero-blog.moledro-hero .page-hero-blog-image img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Catalog: dark technical grid */
.page-hero-catalog.moledro-hero {
    background: radial-gradient(circle at 90% 20%,rgba(77,180,220,.16),transparent 35%),#17191d;
}
.page-hero-catalog.moledro-hero .page-hero-catalog-grid {
    position: absolute; inset: 0; opacity: .07;
    background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
    background-size: 46px 46px; pointer-events: none;
}
.page-hero-catalog.moledro-hero .page-hero-catalog-container {
    position: relative; z-index: 1; display: flex; align-items: center;
    justify-content: space-between; gap: 40px; min-height: 390px;
    padding: 55px clamp(24px,5vw,75px);
}
.page-hero-catalog.moledro-hero .page-hero-catalog-content { max-width: 780px; min-width: 0; }
.page-hero-catalog.moledro-hero p,
.page-hero-custom.moledro-hero p {
    max-width: 640px; margin: 0; color: #b4becb; font-size: 15px; line-height: 1.85;
}
.page-hero-catalog.moledro-hero .page-hero-catalog-icon {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 155px; width: 155px; height: 155px;
    border: 1px solid rgba(77,180,220,.2); border-radius: 26px;
    background: rgba(77,180,220,.07); color: var(--mh-blue);
    font-size: 62px; transform: rotate(5deg);
}
/* Custom: asymmetric creative feature */
.page-hero-custom.moledro-hero {
    padding: clamp(30px,5vw,65px);
    background: radial-gradient(circle at 90% 15%,rgba(213,44,131,.13),transparent 35%),#17191d;
}
.page-hero-custom.moledro-hero .page-hero-custom-container {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px);
    align-items: center; gap: clamp(30px,5vw,70px); min-height: 335px;
}
.page-hero-custom.moledro-hero .page-hero-custom-content { min-width: 0; }
.page-hero-custom.moledro-hero .page-hero-custom-breadcrumb > span:first-of-type {
    display: block; width: 22px; height: 1px; background: #737d89;
}
.page-hero-custom.moledro-hero .page-hero-custom-image {
    position: relative; height: 320px; min-width: 0;
}
.page-hero-custom.moledro-hero .page-hero-custom-image img {
    position: relative; z-index: 1; display: block; width: 100%; height: 100%;
    object-fit: cover; border-radius: 14px;
}
.page-hero-custom.moledro-hero .page-hero-custom-image-accent {
    position: absolute; right: -12px; bottom: -12px; width: 75%; height: 75%;
    border-radius: 14px; background: var(--mh-pink);
}
.page-hero-custom.moledro-hero .page-hero-custom-graphic { position: relative; height: 310px; }
.page-hero-custom.moledro-hero .page-hero-custom-graphic span {
    position: absolute; display: block; border-radius: 50%;
}
.page-hero-custom.moledro-hero .graphic-one {
    width: 270px; height: 270px; right: 30px; top: 20px;
    border: 1px solid rgba(255,255,255,.12);
}
.page-hero-custom.moledro-hero .graphic-two {
    width: 180px; height: 180px; right: 75px; top: 65px;
    border: 1px solid rgba(77,180,220,.45);
}
.page-hero-custom.moledro-hero .graphic-three {
    width: 70px; height: 70px; right: 130px; top: 120px;
    background: var(--mh-yellow);
}
@media (max-width: 991px) {
    .page-hero-blog.moledro-hero .page-hero-blog-container,
    .page-hero-custom.moledro-hero .page-hero-custom-container {
        grid-template-columns: minmax(0,1fr); gap: 32px;
    }
    .page-hero-blog.moledro-hero .page-hero-blog-image,
    .page-hero-custom.moledro-hero .page-hero-custom-image { height: 280px; }
    .page-hero-catalog.moledro-hero .page-hero-catalog-icon {
        flex-basis: 105px; width: 105px; height: 105px; font-size: 42px;
    }
}
@media (max-width: 767px) {
    :where(.moledro-hero) { width: calc(100% - 20px); margin-top: 12px; border-radius: 13px; }
    .page-hero-default.moledro-hero,
    .page-hero-default.moledro-hero .page-hero-container { min-height: 300px; }
    .page-hero-default.moledro-hero .page-hero-container,
    .page-hero-news.moledro-hero .page-hero-news-container,
    .page-hero-catalog.moledro-hero .page-hero-catalog-container { padding: 35px 24px; }
    .page-hero-news.moledro-hero,
    .page-hero-news.moledro-hero .page-hero-news-container { min-height: 340px; }
    .page-hero-blog.moledro-hero,
    .page-hero-custom.moledro-hero { padding: 32px 24px; }
    .page-hero-default.moledro-hero h1,
    .page-hero-news.moledro-hero h1,
    .page-hero-blog.moledro-hero h1,
    .page-hero-catalog.moledro-hero h1,
    .page-hero-custom.moledro-hero h1 { font-size: clamp(29px,8vw,42px); letter-spacing: -.9px; }
    .page-hero-default.moledro-hero .page-hero-breadcrumb,
    .page-hero-news.moledro-hero .page-hero-news-top,
    .page-hero-blog.moledro-hero .page-hero-blog-breadcrumb,
    .page-hero-catalog.moledro-hero .page-hero-catalog-breadcrumb,
    .page-hero-custom.moledro-hero .page-hero-custom-breadcrumb { margin-bottom: 28px; }
    .page-hero-catalog.moledro-hero .page-hero-catalog-container { min-height: 320px; }
    .page-hero-catalog.moledro-hero .page-hero-catalog-icon { display: none; }
    .page-hero-custom.moledro-hero .page-hero-custom-container { min-height: 0; }
    .page-hero-custom.moledro-hero .page-hero-custom-graphic { display: none; }
    .page-hero-custom.moledro-hero .page-hero-custom-image,
    .page-hero-blog.moledro-hero .page-hero-blog-image { height: 220px; }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE GALLERY | FINAL CSS
============================================================ */

.moledro-page-gallery,
.page-gallery {
    --gallery-blue: #4db4dc;
    --gallery-pink: #d52c83;
    --gallery-yellow: #e8c51d;
    --gallery-dark: #17191d;
    --gallery-text: #4d5562;
    --gallery-muted: #747d89;
    --gallery-border: #e8eaee;
    --gallery-bg: #f7f8fa;

    width: 100%;
    min-width: 0;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.page-gallery .page-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.page-gallery .page-section-heading-content {
    min-width: 0;
}

.page-gallery .page-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--gallery-blue);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.page-gallery .page-section-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    flex-shrink: 0;
    background: var(--gallery-blue);
}

.page-gallery .page-section-heading h2 {
    margin: 0;
    color: var(--gallery-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.page-gallery .page-section-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gallery-border);
    border-radius: 9px;
    background: var(--gallery-bg);
    color: var(--gallery-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   GALLERY GRID
============================================================ */

.page-gallery .page-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}

/* ============================================================
   GALLERY CARD
============================================================ */

.page-gallery .page-gallery-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--gallery-border);
    border-radius: 13px;
    background: #fff;
    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
}

.page-gallery .page-gallery-item:hover {
    border-color: #d7eaf3;
    box-shadow: 0 14px 32px rgba(23, 25, 29, .07);
    transform: translateY(-3px);
}

/* ============================================================
   IMAGE
============================================================ */

.page-gallery .page-gallery-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #edf0f3;
    cursor: zoom-in;
    appearance: none;
}

.page-gallery .page-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.page-gallery .page-gallery-item:hover .page-gallery-image img {
    transform: scale(1.045);
}

.page-gallery .page-gallery-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 45%,
            rgba(10, 14, 20, .35) 100%
    );
    pointer-events: none;
}

/* ============================================================
   ZOOM BUTTON
============================================================ */

.page-gallery .page-gallery-zoom {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    color: var(--gallery-dark);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
    transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
}

.page-gallery .page-gallery-zoom i {
    font-size: 17px;
}

.page-gallery .page-gallery-item:hover .page-gallery-zoom {
    background: var(--gallery-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   CARD CONTENT
============================================================ */

.page-gallery .page-gallery-content {
    padding: 21px 22px 23px;
}

.page-gallery .page-gallery-content h3 {
    margin: 0;
    color: var(--gallery-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.25px;
    overflow-wrap: anywhere;
}

.page-gallery .page-gallery-content p {
    margin: 9px 0 0;
    color: var(--gallery-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

/* ============================================================
   LIGHTBOX OVERLAY
============================================================ */

.page-gallery .page-gallery-lightbox {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 65px 90px;
    background: rgba(9, 12, 17, .96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
            opacity .25s ease,
            visibility .25s ease;
}

.page-gallery .page-gallery-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.page-gallery-open {
    overflow: hidden;
}

/* ============================================================
   LIGHTBOX CONTENT
============================================================ */

.page-gallery .page-gallery-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 1150px;
    max-height: 100%;
    min-width: 0;
}

.page-gallery .page-gallery-lightbox-content > img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 6px;
}

/* ============================================================
   LIGHTBOX CAPTION
============================================================ */

.page-gallery .page-gallery-lightbox-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    max-width: 750px;
    color: #fff;
    text-align: center;
}

.page-gallery .page-gallery-lightbox-caption:empty {
    display: none;
}

.page-gallery .page-gallery-lightbox-caption strong {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}

.page-gallery .page-gallery-lightbox-caption span {
    color: rgba(255, 255, 255, .58);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

/* ============================================================
   LIGHTBOX CONTROLS
============================================================ */

.page-gallery .page-gallery-lightbox-close,
.page-gallery .page-gallery-lightbox-prev,
.page-gallery .page-gallery-lightbox-next {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    cursor: pointer;
    transition:
            background .2s ease,
            border-color .2s ease;
}

.page-gallery .page-gallery-lightbox-close:hover,
.page-gallery .page-gallery-lightbox-prev:hover,
.page-gallery .page-gallery-lightbox-next:hover {
    border-color: var(--gallery-blue);
    background: var(--gallery-blue);
}

.page-gallery .page-gallery-lightbox-close i,
.page-gallery .page-gallery-lightbox-prev i,
.page-gallery .page-gallery-lightbox-next i {
    font-size: 20px;
}

.page-gallery .page-gallery-lightbox-close {
    top: 26px;
    right: 30px;
}

.page-gallery .page-gallery-lightbox-prev {
    top: 50%;
    left: 26px;
    transform: translateY(-50%);
}

.page-gallery .page-gallery-lightbox-next {
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
}

.page-gallery .page-gallery-image:focus-visible,
.page-gallery .page-gallery-lightbox button:focus-visible {
    outline: 3px solid var(--gallery-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .page-gallery .page-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .page-gallery .page-gallery-lightbox {
        padding: 65px 65px;
    }

    .page-gallery .page-gallery-lightbox-prev {
        left: 10px;
    }

    .page-gallery .page-gallery-lightbox-next {
        right: 10px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .page-gallery .page-section-heading {
        margin-bottom: 24px;
    }

    .page-gallery .page-section-kicker {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .page-gallery .page-section-heading h2 {
        font-size: 29px;
    }

    .page-gallery .page-section-count {
        min-width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .page-gallery .page-gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .page-gallery .page-gallery-item {
        border-radius: 11px;
    }

    .page-gallery .page-gallery-image {
        aspect-ratio: 4 / 3;
    }

    .page-gallery .page-gallery-content {
        padding: 17px 18px 19px;
    }

    .page-gallery .page-gallery-content h3 {
        font-size: 15px;
    }

    .page-gallery .page-gallery-content p {
        font-size: 12px;
    }

    .page-gallery .page-gallery-zoom {
        right: 12px;
        bottom: 12px;
        width: 39px;
        height: 39px;
    }

    .page-gallery .page-gallery-lightbox {
        padding: 75px 15px 90px;
    }

    .page-gallery .page-gallery-lightbox-content > img {
        max-height: calc(100vh - 240px);
    }

    .page-gallery .page-gallery-lightbox-close {
        top: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
    }

    .page-gallery .page-gallery-lightbox-prev,
    .page-gallery .page-gallery-lightbox-next {
        top: auto;
        bottom: 22px;
        width: 43px;
        height: 43px;
        transform: none;
    }

    .page-gallery .page-gallery-lightbox-prev {
        left: calc(50% - 53px);
    }

    .page-gallery .page-gallery-lightbox-next {
        right: calc(50% - 53px);
    }

    .page-gallery .page-gallery-lightbox-caption strong {
        font-size: 15px;
    }

    .page-gallery .page-gallery-lightbox-caption span {
        font-size: 12px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .page-gallery .page-gallery-item,
    .page-gallery .page-gallery-image img,
    .page-gallery .page-gallery-zoom,
    .page-gallery .page-gallery-lightbox,
    .page-gallery .page-gallery-lightbox button {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   COMMON PAGE CARDS | FINAL CSS
============================================================ */

.moledro-cards {
    --mc-blue: #4db4dc;
    --mc-pink: #d52c83;
    --mc-yellow: #e8c51d;
    --mc-dark: #17191d;
    --mc-text: #4d5562;
    --mc-muted: #747d89;
    --mc-border: #e8eaee;
    --mc-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

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

.moledro-cards .moledro-cards-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
}

.moledro-cards .moledro-cards-heading {
    min-width: 0;
}

.moledro-cards .moledro-cards-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--mc-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.moledro-cards .moledro-cards-kicker-line {
    display: block;
    width: 26px;
    height: 2px;
    flex-shrink: 0;
    background: var(--mc-blue);
}

.moledro-cards .moledro-cards-kicker i {
    font-size: 13px;
}

.moledro-cards .moledro-cards-heading h2 {
    margin: 0;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   MORE BUTTON
============================================================ */

.moledro-cards .moledro-cards-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-shrink: 0;
    min-height: 43px;
    padding: 11px 17px;
    border: 1px solid var(--mc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--mc-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
            border-color .2s ease,
            background .2s ease,
            color .2s ease;
}

.moledro-cards .moledro-cards-more i {
    color: var(--mc-blue);
    font-size: 14px;
}

.moledro-cards .moledro-cards-more:hover {
    border-color: var(--mc-blue);
    background: var(--mc-blue);
    color: #fff;
}

.moledro-cards .moledro-cards-more:hover i {
    color: #fff;
}

/* ============================================================
   CARD GRID
============================================================ */

.moledro-cards .moledro-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

/* ============================================================
   CARD
============================================================ */

.moledro-cards .moledro-card {
    display: block;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    background: #fff;
    transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
}

.moledro-cards .moledro-card:hover {
    transform: translateY(-4px);
    border-color: #d5eaf3;
    box-shadow: 0 15px 35px rgba(23, 25, 29, .07);
}

.moledro-cards .moledro-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   CARD IMAGE
============================================================ */

.moledro-cards .moledro-card-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #eef1f4;
}

.moledro-cards .moledro-card-image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.moledro-cards .moledro-card:hover .moledro-card-image > img {
    transform: scale(1.045);
}

/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */

.moledro-cards .moledro-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 190px;
    background:
            radial-gradient(
                    circle at 75% 25%,
                    rgba(77, 180, 220, .14),
                    transparent 45%
            ),
            #f0f4f6;
    color: var(--mc-blue);
}

.moledro-cards .moledro-card-placeholder i {
    font-size: 54px;
    opacity: .7;
}

/* ============================================================
   CATEGORY BADGE
============================================================ */

.moledro-cards .moledro-card-badge {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(23, 25, 29, .88);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .3px;
}

.moledro-cards .moledro-card-badge i {
    color: var(--mc-blue);
    font-size: 12px;
}

/* ============================================================
   IMAGE ARROW
============================================================ */

.moledro-cards .moledro-card-image-arrow {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .95);
    color: var(--mc-dark);
    font-size: 17px;
    transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
}

.moledro-cards .moledro-card:hover .moledro-card-image-arrow {
    background: var(--mc-blue);
    color: #fff;
    transform: translate(2px, -2px);
}

/* ============================================================
   CARD CONTENT
============================================================ */

.moledro-cards .moledro-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 24px;
}

/* DATE */

.moledro-cards .moledro-card-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--mc-muted);
    font-size: 11px;
    font-weight: 600;
}

.moledro-cards .moledro-card-date i {
    color: var(--mc-blue);
    font-size: 13px;
}

/* TITLE */

.moledro-cards .moledro-card-content h3 {
    margin: 0;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.35px;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.moledro-cards .moledro-card:hover .moledro-card-content h3 {
    color: var(--mc-blue);
}

/* DESCRIPTION */

.moledro-cards .moledro-card-content p {
    display: -webkit-box;
    margin: 12px 0 0;
    overflow: hidden;
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

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

.moledro-cards .moledro-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 23px;
    color: var(--mc-dark);
    font-size: 12px;
    font-weight: 800;
}

.moledro-cards .moledro-card-footer > span:first-child {
    transition: color .2s ease;
}

.moledro-cards .moledro-card:hover .moledro-card-footer > span:first-child {
    color: var(--mc-blue);
}

.moledro-cards .moledro-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--mc-border);
    border-radius: 8px;
    background: var(--mc-light);
    color: var(--mc-dark);
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-cards .moledro-card:hover .moledro-card-arrow {
    border-color: var(--mc-blue);
    background: var(--mc-blue);
    color: #fff;
}

/* ============================================================
   HOME / DETAIL
============================================================ */

.moledro-cards-home {
    width: 100%;
}

.moledro-cards-detail {
    width: 100%;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-cards .moledro-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .moledro-cards .moledro-card-content {
        padding: 21px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-cards .moledro-cards-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px;
        margin-bottom: 25px;
    }

    .moledro-cards .moledro-cards-kicker {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-cards .moledro-cards-kicker-line {
        width: 20px;
    }

    .moledro-cards .moledro-cards-heading h2 {
        font-size: 28px;
    }

    .moledro-cards .moledro-cards-more {
        min-height: 40px;
        padding: 10px 14px;
    }

    .moledro-cards .moledro-cards-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .moledro-cards .moledro-card {
        border-radius: 11px;
    }

    .moledro-cards .moledro-card-image {
        aspect-ratio: 16 / 10;
    }

    .moledro-cards .moledro-card-content {
        padding: 19px;
    }

    .moledro-cards .moledro-card-content h3 {
        font-size: 17px;
    }

    .moledro-cards .moledro-card-content p {
        font-size: 12px;
    }

    .moledro-cards .moledro-card-footer {
        padding-top: 19px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-cards .moledro-card,
    .moledro-cards .moledro-card-image img,
    .moledro-cards .moledro-card-image-arrow,
    .moledro-cards .moledro-card-content h3,
    .moledro-cards .moledro-card-arrow {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   SHOWCASE COMPONENT | FINAL CSS
============================================================ */

.moledro-showcase {
    --showcase-blue: #4db4dc;
    --showcase-pink: #d52c83;
    --showcase-yellow: #e8c51d;
    --showcase-dark: #17191d;
    --showcase-text: #4d5562;
    --showcase-muted: #747d89;
    --showcase-border: #e8eaee;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--showcase-border);
    border-radius: 18px;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SHOWCASE MEDIA
============================================================ */

.moledro-showcase .moledro-showcase-media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 440px;
    margin: 0;
    overflow: hidden;
    background: #eef1f4;
}

.moledro-showcase .moledro-showcase-media > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    transition: transform .6s ease;
}

.moledro-showcase:hover .moledro-showcase-media > img {
    transform: scale(1.035);
}

.moledro-showcase .moledro-showcase-media::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 60%,
            rgba(10, 14, 20, .2) 100%
    );
    pointer-events: none;
}

/* ============================================================
   PLACEHOLDER
============================================================ */

.moledro-showcase .moledro-showcase-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 440px;
    background:
            radial-gradient(
                    circle at 75% 25%,
                    rgba(77, 180, 220, .18),
                    transparent 45%
            ),
            linear-gradient(
                    135deg,
                    #edf3f6,
                    #f7f9fb
            );
    color: var(--showcase-blue);
}

.moledro-showcase .moledro-showcase-placeholder i {
    font-size: 95px;
    opacity: .6;
}

/* ============================================================
   CATALOG MEDIA TAG
============================================================ */

.moledro-showcase .moledro-showcase-media-tag {
    position: absolute;
    z-index: 3;
    top: 25px;
    left: 25px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(23, 25, 29, .88);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.moledro-showcase .moledro-showcase-media-tag i {
    color: var(--showcase-blue);
    font-size: 13px;
}

/* ============================================================
   BRAND DECORATION
============================================================ */

.moledro-showcase .moledro-showcase-media-decoration {
    position: absolute;
    z-index: 3;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.moledro-showcase .moledro-showcase-media-decoration span {
    display: block;
    height: 4px;
    border-radius: 4px;
}

.moledro-showcase .moledro-showcase-media-decoration span:nth-child(1) {
    width: 38px;
    background: var(--showcase-blue);
}

.moledro-showcase .moledro-showcase-media-decoration span:nth-child(2) {
    width: 22px;
    background: var(--showcase-pink);
}

.moledro-showcase .moledro-showcase-media-decoration span:nth-child(3) {
    width: 12px;
    background: var(--showcase-yellow);
}

/* ============================================================
   SHOWCASE BODY
============================================================ */

.moledro-showcase .moledro-showcase-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(35px, 5vw, 75px);
    background: #fff;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-showcase .moledro-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--showcase-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.5px;
}

.moledro-showcase .moledro-showcase-kicker-line {
    display: block;
    width: 27px;
    height: 2px;
    flex-shrink: 0;
    background: var(--showcase-blue);
}

.moledro-showcase .moledro-showcase-kicker i {
    font-size: 14px;
}

/* ============================================================
   DATE
============================================================ */

.moledro-showcase .moledro-showcase-date {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    color: var(--showcase-muted);
    font-size: 12px;
    font-weight: 600;
}

.moledro-showcase .moledro-showcase-date i {
    color: var(--showcase-blue);
    font-size: 14px;
}

/* ============================================================
   TITLE
============================================================ */

.moledro-showcase .moledro-showcase-body h2 {
    margin: 0;
    color: var(--showcase-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(29px, 3.2vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-showcase .moledro-showcase-body p {
    display: -webkit-box;
    max-width: 560px;
    margin: 22px 0 0;
    overflow: hidden;
    color: var(--showcase-text);
    font-size: 14px;
    line-height: 1.95;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* ============================================================
   BUTTON
============================================================ */

.moledro-showcase .moledro-showcase-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 49px;
    margin-top: 32px;
    padding: 7px 7px 7px 20px;
    border: 1px solid var(--showcase-dark);
    border-radius: 9px;
    background: var(--showcase-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.moledro-showcase .moledro-showcase-button:hover {
    border-color: var(--showcase-blue);
    background: var(--showcase-blue);
    color: #fff;
    transform: translateY(-2px);
}

.moledro-showcase .moledro-showcase-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 15px;
}

.moledro-showcase .moledro-showcase-button:focus-visible {
    outline: 3px solid var(--showcase-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .moledro-showcase .moledro-showcase-media,
    .moledro-showcase .moledro-showcase-media > img,
    .moledro-showcase .moledro-showcase-placeholder {
        min-height: 370px;
    }

    .moledro-showcase .moledro-showcase-body {
        padding: 35px;
    }

    .moledro-showcase .moledro-showcase-body h2 {
        font-size: 31px;
    }

    .moledro-showcase .moledro-showcase-body p {
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-showcase {
        grid-template-columns: 1fr;
        border-radius: 13px;
    }

    .moledro-showcase .moledro-showcase-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .moledro-showcase .moledro-showcase-media > img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .moledro-showcase .moledro-showcase-placeholder {
        min-height: 0;
        height: 100%;
    }

    .moledro-showcase .moledro-showcase-placeholder i {
        font-size: 65px;
    }

    .moledro-showcase .moledro-showcase-body {
        padding: 29px 25px 32px;
    }

    .moledro-showcase .moledro-showcase-kicker {
        margin-bottom: 17px;
        font-size: 9px;
    }

    .moledro-showcase .moledro-showcase-body h2 {
        font-size: clamp(27px, 6vw, 34px);
        letter-spacing: -.8px;
    }

    .moledro-showcase .moledro-showcase-body p {
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.85;
    }

    .moledro-showcase .moledro-showcase-button {
        margin-top: 25px;
    }

    .moledro-showcase .moledro-showcase-media-tag {
        top: 15px;
        left: 15px;
    }

    .moledro-showcase .moledro-showcase-media-decoration {
        right: 15px;
        bottom: 15px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-showcase .moledro-showcase-body {
        padding: 24px 20px 27px;
    }

    .moledro-showcase .moledro-showcase-body h2 {
        font-size: 26px;
    }

    .moledro-showcase .moledro-showcase-button {
        width: 100%;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-showcase .moledro-showcase-media img,
    .moledro-showcase .moledro-showcase-button {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   HOME SHOWCASE | FINAL CSS
============================================================ */

.moledro-home-showcase {
    --hs-blue: #4db4dc;
    --hs-pink: #d52c83;
    --hs-yellow: #e8c51d;
    --hs-dark: #17191d;
    --hs-text: #4d5562;
    --hs-muted: #747d89;
    --hs-border: #e8eaee;
    --hs-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION
============================================================ */

.moledro-home-showcase .moledro-showcase-section {
    width: 100%;
    margin: 0;
    padding: 65px 0;
}

.moledro-home-showcase .moledro-showcase-section + .moledro-showcase-section {
    border-top: 1px solid #f0f1f3;
}

.moledro-home-showcase .moledro-showcase-container {
    width: 100%;
    max-width: var(--site-max-width, 1440px);
    margin: 0 auto;
    padding: 0 var(--site-gutter, 30px);
}

/* ============================================================
   FEATURED SHOWCASE
============================================================ */

.moledro-home-showcase .moledro-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hs-border);
    border-radius: 18px;
    background: #fff;
}

/* NO IMAGE */

.moledro-home-showcase .moledro-featured:not(:has(.moledro-featured-image)) {
    grid-template-columns: 1fr;
    background:
            radial-gradient(
                    circle at 95% 15%,
                    rgba(77, 180, 220, .08),
                    transparent 40%
            ),
            #fff;
}

.moledro-home-showcase
.moledro-featured:not(:has(.moledro-featured-image))
.moledro-featured-body {
    max-width: 850px;
    min-height: 340px;
}

/* ============================================================
   FEATURED IMAGE
============================================================ */

.moledro-home-showcase .moledro-featured-image {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 430px;
    margin: 0;
    overflow: hidden;
    background: #eef1f4;
}

.moledro-home-showcase .moledro-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    transition: transform .55s ease;
}

.moledro-home-showcase .moledro-featured:hover .moledro-featured-image img {
    transform: scale(1.04);
}

.moledro-home-showcase .moledro-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 55%,
            rgba(10, 14, 20, .22) 100%
    );
    pointer-events: none;
}

/* ============================================================
   IMAGE ACTION
============================================================ */

.moledro-home-showcase .moledro-featured-image-action {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    color: var(--hs-dark);
    font-size: 19px;
    transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
}

.moledro-home-showcase .moledro-featured-image:hover
.moledro-featured-image-action {
    background: var(--hs-blue);
    color: #fff;
    transform: translate(2px, -2px);
}

/* ============================================================
   CONTENT BODY
============================================================ */

.moledro-home-showcase .moledro-featured-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(35px, 5vw, 75px);
    background: transparent;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-home-showcase .moledro-featured-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
}

.moledro-home-showcase .moledro-featured-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 2px;
    background: var(--hs-blue);
}

.moledro-home-showcase .moledro-featured-badge {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--hs-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.6px;
}

/* ============================================================
   TITLE
============================================================ */

.moledro-home-showcase .moledro-featured-body h2 {
    max-width: 650px;
    margin: 0;
    color: var(--hs-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(30px, 3.3vw, 47px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.4px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-home-showcase .moledro-featured-body p {
    display: -webkit-box;
    max-width: 570px;
    margin: 22px 0 0;
    overflow: hidden;
    color: var(--hs-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.95;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* ============================================================
   BUTTON
============================================================ */

.moledro-home-showcase .moledro-featured-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 49px;
    margin-top: 32px;
    padding: 7px 7px 7px 20px;
    border: 1px solid var(--hs-dark);
    border-radius: 9px;
    background: var(--hs-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.moledro-home-showcase .moledro-featured-button:hover {
    border-color: var(--hs-blue);
    background: var(--hs-blue);
    color: #fff;
    transform: translateY(-2px);
}

.moledro-home-showcase .moledro-featured-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 15px;
}

.moledro-home-showcase .moledro-featured-button:focus-visible,
.moledro-home-showcase .moledro-featured-image:focus-visible {
    outline: 3px solid var(--hs-blue);
    outline-offset: 3px;
}

/* ============================================================
   HOME CARDS IN SHOWCASE
============================================================ */

.moledro-home-showcase .moledro-cards {
    width: 100%;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-home-showcase .moledro-showcase-section {
        padding: 48px 0;
    }

    .moledro-home-showcase .moledro-featured {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .moledro-home-showcase .moledro-featured-image,
    .moledro-home-showcase .moledro-featured-image img {
        min-height: 370px;
    }

    .moledro-home-showcase .moledro-featured-body {
        padding: 35px;
    }

    .moledro-home-showcase .moledro-featured-body h2 {
        font-size: 32px;
    }

    .moledro-home-showcase .moledro-featured-body p {
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-home-showcase .moledro-showcase-section {
        padding: 35px 0;
    }

    .moledro-home-showcase .moledro-showcase-container {
        padding: 0 15px;
    }

    .moledro-home-showcase .moledro-featured {
        grid-template-columns: 1fr;
        border-radius: 13px;
    }

    .moledro-home-showcase .moledro-featured-image {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .moledro-home-showcase .moledro-featured-image img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .moledro-home-showcase .moledro-featured-body {
        padding: 30px 25px 32px;
    }

    .moledro-home-showcase .moledro-featured-kicker {
        margin-bottom: 18px;
    }

    .moledro-home-showcase .moledro-featured-badge {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .moledro-home-showcase .moledro-featured-body h2 {
        font-size: clamp(27px, 6vw, 34px);
        letter-spacing: -.8px;
    }

    .moledro-home-showcase .moledro-featured-body p {
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.85;
    }

    .moledro-home-showcase .moledro-featured-button {
        margin-top: 25px;
    }

    .moledro-home-showcase .moledro-featured-image-action {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }

    .moledro-home-showcase
    .moledro-featured:not(:has(.moledro-featured-image))
    .moledro-featured-body {
        min-height: 280px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-home-showcase .moledro-featured-body {
        padding: 25px 20px 28px;
    }

    .moledro-home-showcase .moledro-featured-body h2 {
        font-size: 26px;
    }

    .moledro-home-showcase .moledro-featured-button {
        width: 100%;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-home-showcase .moledro-featured-image img,
    .moledro-home-showcase .moledro-featured-image-action,
    .moledro-home-showcase .moledro-featured-button {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE SLIDER | FINAL CSS
============================================================ */

.moledro-page-slider-section {
    --slider-blue: #4db4dc;
    --slider-pink: #d52c83;
    --slider-yellow: #e8c51d;
    --slider-dark: #17191d;

    width: 100%;
    min-width: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SLIDER CONTAINER
============================================================ */

.moledro-page-slider {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--slider-dark);
}

.moledro-page-slider .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ============================================================
   SLIDER ITEM
============================================================ */

.moledro-page-slider .moledro-page-slider-item {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
}

/* ============================================================
   IMAGE
============================================================ */

.moledro-page-slider .moledro-page-slider-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.moledro-page-slider .moledro-page-slider-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   OVERLAY
============================================================ */

.moledro-page-slider .moledro-page-slider-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(12, 15, 21, .92) 0%,
            rgba(12, 15, 21, .76) 36%,
            rgba(12, 15, 21, .38) 68%,
            rgba(12, 15, 21, .12) 100%
    );
    pointer-events: none;
}

/* ============================================================
   CONTENT
============================================================ */

.moledro-page-slider .moledro-page-slider-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 480px;
    padding: 65px 95px;
}

.moledro-page-slider .moledro-page-slider-content-inner {
    width: 100%;
    max-width: 730px;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-page-slider .moledro-page-slider-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--slider-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.6px;
}

.moledro-page-slider .moledro-page-slider-kicker-line {
    display: block;
    width: 30px;
    height: 2px;
    flex-shrink: 0;
    background: var(--slider-blue);
}

/* ============================================================
   TITLE
============================================================ */

.moledro-page-slider .moledro-page-slider-content h2 {
    max-width: 730px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(34px, 4.3vw, 62px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -1.8px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-page-slider .moledro-page-slider-content p {
    display: -webkit-box;
    max-width: 620px;
    margin: 22px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* ============================================================
   BUTTON
============================================================ */

.moledro-page-slider .moledro-page-slider-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 27px;
    min-height: 50px;
    margin-top: 30px;
    padding: 7px 7px 7px 20px;
    border: 1px solid var(--slider-blue);
    border-radius: 9px;
    background: var(--slider-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
}

.moledro-page-slider .moledro-page-slider-button:hover {
    border-color: #fff;
    background: #fff;
    color: var(--slider-dark);
    transform: translateY(-2px);
}

.moledro-page-slider .moledro-page-slider-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
    font-size: 15px;
}

.moledro-page-slider .moledro-page-slider-button:hover
.moledro-page-slider-button-icon {
    background: rgba(23, 25, 29, .08);
}

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

.moledro-page-slider .moledro-page-slider-control {
    position: absolute;
    z-index: 5;
    top: 50%;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
    transition:
            background .2s ease,
            border-color .2s ease;
}

.moledro-page-slider .moledro-page-slider-control:hover {
    border-color: var(--slider-blue);
    background: var(--slider-blue);
}

.moledro-page-slider .moledro-page-slider-control > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.moledro-page-slider .moledro-page-slider-control i {
    font-size: 18px;
}

.moledro-page-slider .moledro-page-slider-control-prev {
    left: 24px;
}

.moledro-page-slider .moledro-page-slider-control-next {
    right: 24px;
}

/* ============================================================
   INDICATORS
============================================================ */

.moledro-page-slider .moledro-page-slider-indicators {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 25px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.moledro-page-slider .moledro-page-slider-indicators button {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 24px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .45);
    opacity: 1;
    transition:
            width .25s ease,
            background .25s ease;
}

.moledro-page-slider .moledro-page-slider-indicators button.active {
    width: 42px;
    background: var(--slider-blue);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-slider .moledro-page-slider-item,
    .moledro-page-slider .moledro-page-slider-content {
        min-height: 430px;
    }

    .moledro-page-slider .moledro-page-slider-content {
        padding: 55px 75px;
    }

    .moledro-page-slider .moledro-page-slider-content h2 {
        font-size: clamp(32px, 4.8vw, 48px);
    }

    .moledro-page-slider .moledro-page-slider-control {
        width: 40px;
        height: 40px;
    }

    .moledro-page-slider .moledro-page-slider-control-prev {
        left: 15px;
    }

    .moledro-page-slider .moledro-page-slider-control-next {
        right: 15px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-page-slider {
        border-radius: 12px;
    }

    .moledro-page-slider .moledro-page-slider-item,
    .moledro-page-slider .moledro-page-slider-content {
        min-height: 460px;
    }

    .moledro-page-slider .moledro-page-slider-content {
        align-items: flex-end;
        padding: 45px 25px 80px;
    }

    .moledro-page-slider .moledro-page-slider-overlay {
        background: linear-gradient(
                0deg,
                rgba(12, 15, 21, .96) 0%,
                rgba(12, 15, 21, .75) 48%,
                rgba(12, 15, 21, .18) 100%
        );
    }

    .moledro-page-slider .moledro-page-slider-kicker {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .moledro-page-slider .moledro-page-slider-kicker-line {
        width: 22px;
    }

    .moledro-page-slider .moledro-page-slider-content h2 {
        font-size: clamp(28px, 7vw, 38px);
        letter-spacing: -.8px;
    }

    .moledro-page-slider .moledro-page-slider-content p {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.75;
        -webkit-line-clamp: 3;
    }

    .moledro-page-slider .moledro-page-slider-button {
        margin-top: 23px;
    }

    .moledro-page-slider .moledro-page-slider-control {
        top: 18px;
        width: 38px;
        height: 38px;
        transform: none;
    }

    .moledro-page-slider .moledro-page-slider-control-prev {
        left: auto;
        right: 62px;
    }

    .moledro-page-slider .moledro-page-slider-control-next {
        right: 18px;
    }

    .moledro-page-slider .moledro-page-slider-indicators {
        bottom: 19px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-page-slider .moledro-page-slider-content {
        padding: 45px 20px 75px;
    }

    .moledro-page-slider .moledro-page-slider-content h2 {
        font-size: 27px;
    }

    .moledro-page-slider .moledro-page-slider-button {
        max-width: 100%;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-page-slider .moledro-page-slider-button,
    .moledro-page-slider .moledro-page-slider-control,
    .moledro-page-slider .moledro-page-slider-indicators button {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE TABS | FINAL CSS
============================================================ */

.moledro-page-tabs {
    --mt-blue: #4db4dc;
    --mt-pink: #d52c83;
    --mt-yellow: #e8c51d;
    --mt-dark: #17191d;
    --mt-text: #4d5562;
    --mt-muted: #747d89;
    --mt-border: #e8eaee;
    --mt-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   WRAPPER
============================================================ */

.moledro-page-tabs .moledro-tabs-wrapper {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    align-items: stretch;
    gap: 25px;
    width: 100%;
    min-width: 0;
}

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

.moledro-page-tabs .moledro-tabs-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--mt-border);
    border-radius: 13px;
    background: var(--mt-light);
}

/* ============================================================
   TAB BUTTON
============================================================ */

.moledro-page-tabs .moledro-tab-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 14px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--mt-text);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease,
            box-shadow .2s ease;
}

.moledro-page-tabs .moledro-tab-button:hover {
    border-color: #dfe6eb;
    background: #fff;
    color: var(--mt-dark);
}

.moledro-page-tabs .moledro-tab-button.active {
    border-color: #dcecf3;
    background: #fff;
    color: var(--mt-dark);
    box-shadow: 0 5px 17px rgba(23, 25, 29, .045);
}

.moledro-page-tabs .moledro-tab-button.active::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mt-blue);
}

/* ============================================================
   TAB NUMBER
============================================================ */

.moledro-page-tabs .moledro-tab-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e8ec;
    border-radius: 7px;
    background: #fff;
    color: var(--mt-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.moledro-page-tabs .moledro-tab-button.active .moledro-tab-number {
    border-color: var(--mt-blue);
    background: var(--mt-blue);
    color: #fff;
}

/* ============================================================
   TAB TITLE
============================================================ */

.moledro-page-tabs .moledro-tab-title {
    display: block;
    flex: 1;
    min-width: 0;
    color: inherit;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.moledro-page-tabs .moledro-tab-button.active .moledro-tab-title {
    font-weight: 800;
}

/* ============================================================
   TAB ARROW
============================================================ */

.moledro-page-tabs .moledro-tab-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #a5adb6;
    font-size: 14px;
    transition:
            color .2s ease,
            transform .2s ease;
}

.moledro-page-tabs .moledro-tab-button:hover .moledro-tab-arrow,
.moledro-page-tabs .moledro-tab-button.active .moledro-tab-arrow {
    color: var(--mt-blue);
    transform: translate(2px, -2px);
}

/* ============================================================
   CONTENT PANEL
============================================================ */

.moledro-page-tabs .moledro-tabs-content {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 340px;
    padding: 0;
    border: 1px solid var(--mt-border);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}

.moledro-page-tabs .moledro-tabs-content > .tab-pane {
    width: 100%;
    min-width: 0;
}

.moledro-page-tabs .moledro-tabs-content > .tab-pane:not(.active) {
    display: none;
}

.moledro-page-tabs .moledro-tabs-content > .tab-pane.active {
    display: block;
}

/* ============================================================
   CONTENT INNER
============================================================ */

.moledro-page-tabs .moledro-tab-content-inner {
    width: 100%;
    min-width: 0;
    padding: clamp(25px, 3.5vw, 48px);
}

/* ============================================================
   CONTENT KICKER
============================================================ */

.moledro-page-tabs .moledro-tab-content-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    color: var(--mt-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.2px;
}

.moledro-page-tabs .moledro-tab-content-line {
    display: block;
    width: 27px;
    height: 2px;
    flex-shrink: 0;
    background: var(--mt-blue);
}

/* ============================================================
   CONTENT TITLE
============================================================ */

.moledro-page-tabs .moledro-tab-content-inner h3 {
    margin: 0 0 22px;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
}

/* ============================================================
   RICH TEXT DESCRIPTION
============================================================ */

.moledro-page-tabs .moledro-tab-description {
    min-width: 0;
    color: var(--mt-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.moledro-page-tabs .moledro-tab-description p {
    margin: 0 0 16px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-page-tabs .moledro-tab-description p:last-child {
    margin-bottom: 0;
}

.moledro-page-tabs .moledro-tab-description h1,
.moledro-page-tabs .moledro-tab-description h2,
.moledro-page-tabs .moledro-tab-description h3,
.moledro-page-tabs .moledro-tab-description h4,
.moledro-page-tabs .moledro-tab-description h5,
.moledro-page-tabs .moledro-tab-description h6 {
    margin: 24px 0 12px;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.35;
}

.moledro-page-tabs .moledro-tab-description h2 {
    font-size: 23px;
}

.moledro-page-tabs .moledro-tab-description h3 {
    font-size: 20px;
}

.moledro-page-tabs .moledro-tab-description h4 {
    font-size: 17px;
}

/* ============================================================
   LISTS
============================================================ */

.moledro-page-tabs .moledro-tab-description ul,
.moledro-page-tabs .moledro-tab-description ol {
    margin: 12px 0 20px;
    padding-left: 23px;
}

.moledro-page-tabs .moledro-tab-description li {
    margin-bottom: 9px;
    padding-left: 3px;
    line-height: 1.8;
}

.moledro-page-tabs .moledro-tab-description li::marker {
    color: var(--mt-blue);
}

/* ============================================================
   LINKS
============================================================ */

.moledro-page-tabs .moledro-tab-description a {
    color: #258eb8;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(77, 180, 220, .4);
    text-underline-offset: 3px;
}

.moledro-page-tabs .moledro-tab-description a:hover {
    color: var(--mt-pink);
}

/* ============================================================
   IMAGES
============================================================ */

.moledro-page-tabs .moledro-tab-description img {
    max-width: 100%;
    height: auto;
    border-radius: 9px;
}

/* ============================================================
   TABLES
============================================================ */

.moledro-page-tabs .moledro-tab-description table {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 13px;
}

.moledro-page-tabs .moledro-tab-description th,
.moledro-page-tabs .moledro-tab-description td {
    padding: 12px 14px;
    border: 1px solid var(--mt-border);
    text-align: left;
    vertical-align: middle;
}

.moledro-page-tabs .moledro-tab-description th {
    background: var(--mt-light);
    color: var(--mt-dark);
    font-weight: 800;
}

.moledro-page-tabs .moledro-tab-description tr:nth-child(even) td {
    background: #fafbfc;
}

/* ============================================================
   BLOCKQUOTE
============================================================ */

.moledro-page-tabs .moledro-tab-description blockquote {
    margin: 22px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--mt-blue);
    border-radius: 0 8px 8px 0;
    background: var(--mt-light);
    color: var(--mt-text);
}

/* ============================================================
   VIDEO / EMBEDS
============================================================ */

.moledro-page-tabs .moledro-tab-description iframe {
    max-width: 100%;
    border-radius: 9px;
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-page-tabs .moledro-tab-button:focus-visible {
    outline: 3px solid var(--mt-blue);
    outline-offset: 2px;
}

.moledro-page-tabs .moledro-tabs-content .tab-pane:focus {
    outline: none;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-tabs .moledro-tabs-wrapper {
        grid-template-columns: minmax(190px, 235px) minmax(0, 1fr);
        gap: 18px;
    }

    .moledro-page-tabs .moledro-tab-button {
        min-height: 56px;
        padding: 11px 12px;
        gap: 10px;
    }

    .moledro-page-tabs .moledro-tab-title {
        font-size: 12px;
    }

    .moledro-page-tabs .moledro-tab-content-inner {
        padding: 30px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-page-tabs .moledro-tabs-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .moledro-page-tabs .moledro-tabs-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 11px;
        scrollbar-width: thin;
        scrollbar-color: #c9d4dc transparent;
        -webkit-overflow-scrolling: touch;
    }

    .moledro-page-tabs .moledro-tab-button {
        flex: 0 0 auto;
        width: auto;
        max-width: 230px;
        min-height: 49px;
        padding: 10px 13px;
        gap: 9px;
        white-space: nowrap;
    }

    .moledro-page-tabs .moledro-tab-number {
        width: 29px;
        height: 29px;
        font-size: 10px;
    }

    .moledro-page-tabs .moledro-tab-title {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .moledro-page-tabs .moledro-tab-arrow {
        display: none;
    }

    .moledro-page-tabs .moledro-tab-button.active::before {
        top: auto;
        right: 12px;
        bottom: 0;
        left: 12px;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .moledro-page-tabs .moledro-tabs-content {
        min-height: 250px;
        border-radius: 11px;
    }

    .moledro-page-tabs .moledro-tab-content-inner {
        padding: 25px 21px;
    }

    .moledro-page-tabs .moledro-tab-content-kicker {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-page-tabs .moledro-tab-content-line {
        width: 20px;
    }

    .moledro-page-tabs .moledro-tab-content-inner h3 {
        margin-bottom: 17px;
        font-size: 25px;
    }

    .moledro-page-tabs .moledro-tab-description {
        font-size: 13px;
        line-height: 1.85;
    }

    .moledro-page-tabs .moledro-tab-description table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-page-tabs .moledro-tab-content-inner {
        padding: 22px 17px;
    }

    .moledro-page-tabs .moledro-tab-content-inner h3 {
        font-size: 23px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-page-tabs .moledro-tab-button,
    .moledro-page-tabs .moledro-tab-arrow {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   TECHNICAL FEATURES | FINAL CSS
============================================================ */

.moledro-technical-features {
    --tf-blue: #4db4dc;
    --tf-pink: #d52c83;
    --tf-yellow: #e8c51d;
    --tf-dark: #17191d;
    --tf-text: #4d5562;
    --tf-muted: #747d89;
    --tf-border: #e8eaee;
    --tf-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-technical-features .moledro-technical-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.moledro-technical-features .page-section-heading-content {
    min-width: 0;
}

.moledro-technical-features .moledro-technical-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--tf-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.5;
}

.moledro-technical-features .moledro-technical-kicker-line {
    display: block;
    width: 27px;
    height: 2px;
    flex-shrink: 0;
    background: var(--tf-blue);
}

.moledro-technical-features .moledro-technical-heading h2 {
    margin: 0;
    color: var(--tf-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-technical-features .moledro-technical-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tf-border);
    border-radius: 9px;
    background: var(--tf-light);
    color: var(--tf-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   FEATURES GRID
============================================================ */

.moledro-technical-features .moledro-technical-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* ============================================================
   FEATURE CARD
============================================================ */

.moledro-technical-features .moledro-technical-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
    min-height: 155px;
    margin: 0;
    padding: 27px;
    overflow: hidden;
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
}

.moledro-technical-features .moledro-technical-item:hover {
    border-color: #d7eaf3;
    box-shadow: 0 12px 28px rgba(23, 25, 29, .055);
    transform: translateY(-2px);
}

/* ============================================================
   FEATURE NUMBER
============================================================ */

.moledro-technical-features .moledro-technical-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 1px solid #dcecf3;
    border-radius: 10px;
    background: #eff8fc;
    color: var(--tf-blue);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-technical-features .moledro-technical-item:hover
.moledro-technical-number {
    border-color: var(--tf-blue);
    background: var(--tf-blue);
    color: #fff;
}

/* ============================================================
   FEATURE CONTENT
============================================================ */

.moledro-technical-features .moledro-technical-content {
    flex: 1;
    min-width: 0;
}

.moledro-technical-features .moledro-technical-content h3 {
    margin: 2px 0 11px;
    color: var(--tf-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.3px;
    overflow-wrap: anywhere;
}

/* ============================================================
   RICH TEXT
============================================================ */

.moledro-technical-features .moledro-technical-description {
    min-width: 0;
    color: var(--tf-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.moledro-technical-features .moledro-technical-description p {
    margin: 0 0 12px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-technical-features .moledro-technical-description p:last-child {
    margin-bottom: 0;
}

.moledro-technical-features .moledro-technical-description h2,
.moledro-technical-features .moledro-technical-description h3,
.moledro-technical-features .moledro-technical-description h4 {
    margin: 15px 0 10px;
    color: var(--tf-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.4;
}

.moledro-technical-features .moledro-technical-description h2 {
    font-size: 19px;
}

.moledro-technical-features .moledro-technical-description h3 {
    font-size: 17px;
}

.moledro-technical-features .moledro-technical-description h4 {
    font-size: 15px;
}

/* ============================================================
   LISTS
============================================================ */

.moledro-technical-features .moledro-technical-description ul,
.moledro-technical-features .moledro-technical-description ol {
    margin: 12px 0;
    padding-left: 20px;
}

.moledro-technical-features .moledro-technical-description li {
    margin-bottom: 7px;
    line-height: 1.8;
}

.moledro-technical-features .moledro-technical-description li::marker {
    color: var(--tf-blue);
}

/* ============================================================
   LINKS
============================================================ */

.moledro-technical-features .moledro-technical-description a {
    color: #258eb8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-technical-features .moledro-technical-description a:hover {
    color: var(--tf-pink);
}

/* ============================================================
   IMAGES
============================================================ */

.moledro-technical-features .moledro-technical-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ============================================================
   TABLES
============================================================ */

.moledro-technical-features .moledro-technical-description table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12px;
}

.moledro-technical-features .moledro-technical-description th,
.moledro-technical-features .moledro-technical-description td {
    padding: 10px 12px;
    border: 1px solid var(--tf-border);
    text-align: left;
    vertical-align: middle;
}

.moledro-technical-features .moledro-technical-description th {
    background: var(--tf-light);
    color: var(--tf-dark);
    font-weight: 800;
}

/* ============================================================
   BRAND DECORATION
============================================================ */

.moledro-technical-features .moledro-technical-decoration {
    position: absolute;
    right: 20px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: .65;
    pointer-events: none;
}

.moledro-technical-features .moledro-technical-decoration span {
    display: block;
    height: 3px;
    border-radius: 3px;
}

.moledro-technical-features .moledro-technical-decoration span:nth-child(1) {
    width: 17px;
    background: var(--tf-blue);
}

.moledro-technical-features .moledro-technical-decoration span:nth-child(2) {
    width: 10px;
    background: var(--tf-pink);
}

.moledro-technical-features .moledro-technical-decoration span:nth-child(3) {
    width: 6px;
    background: var(--tf-yellow);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-technical-features .moledro-technical-list {
        gap: 15px;
    }

    .moledro-technical-features .moledro-technical-item {
        gap: 15px;
        padding: 22px;
    }

    .moledro-technical-features .moledro-technical-number {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-technical-features .moledro-technical-heading {
        margin-bottom: 24px;
    }

    .moledro-technical-features .moledro-technical-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-technical-features .moledro-technical-kicker-line {
        width: 20px;
    }

    .moledro-technical-features .moledro-technical-heading h2 {
        font-size: 28px;
    }

    .moledro-technical-features .moledro-technical-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-technical-features .moledro-technical-list {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .moledro-technical-features .moledro-technical-item {
        min-height: 0;
        gap: 14px;
        padding: 21px;
        border-radius: 10px;
    }

    .moledro-technical-features .moledro-technical-number {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-technical-features .moledro-technical-content h3 {
        font-size: 16px;
    }

    .moledro-technical-features .moledro-technical-description {
        font-size: 12px;
    }

    .moledro-technical-features .moledro-technical-decoration {
        right: 14px;
        bottom: 12px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-technical-features .moledro-technical-item,
    .moledro-technical-features .moledro-technical-number {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PAGE VIDEOS | FINAL CSS
============================================================ */

.moledro-page-videos {
    --mv-blue: #4db4dc;
    --mv-pink: #d52c83;
    --mv-yellow: #e8c51d;
    --mv-dark: #17191d;
    --mv-text: #4d5562;
    --mv-muted: #747d89;
    --mv-border: #e8eaee;
    --mv-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-page-videos .moledro-videos-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.moledro-page-videos .page-section-heading-content {
    min-width: 0;
}

.moledro-page-videos .moledro-videos-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mv-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-page-videos .moledro-videos-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mv-blue);
}

.moledro-page-videos .moledro-videos-heading h2 {
    margin: 0;
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-page-videos .moledro-videos-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mv-border);
    border-radius: 9px;
    background: var(--mv-light);
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   VIDEO GRID
============================================================ */

.moledro-page-videos .moledro-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    min-width: 0;
}

/* ============================================================
   VIDEO CARD
============================================================ */

.moledro-page-videos .moledro-video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mv-border);
    border-radius: 13px;
    background: #fff;
    transition:
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
}

.moledro-page-videos .moledro-video-card:hover {
    border-color: #d6eaf3;
    box-shadow: 0 13px 30px rgba(23, 25, 29, .065);
    transform: translateY(-2px);
}

/* ============================================================
   VIDEO MEDIA
============================================================ */

.moledro-page-videos .moledro-video-media {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--mv-dark);
}

/* ============================================================
   VIDEO RATIO
============================================================ */

.moledro-page-videos .moledro-video-ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111318;
}

.moledro-page-videos .moledro-video-ratio iframe,
.moledro-page-videos .moledro-video-ratio video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: contain;
    background: #111318;
}

/* ============================================================
   EXTERNAL VIDEO
============================================================ */

.moledro-page-videos .moledro-video-external {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1d232c;
    color: #fff;
    text-decoration: none;
}

.moledro-page-videos .moledro-video-external > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.moledro-page-videos .moledro-video-external:hover > img {
    transform: scale(1.05);
}

.moledro-page-videos .moledro-video-external::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10, 14, 20, .24);
    pointer-events: none;
}

/* ============================================================
   PLACEHOLDER
============================================================ */

.moledro-page-videos .moledro-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
            radial-gradient(
                    circle at 75% 25%,
                    rgba(77, 180, 220, .18),
                    transparent 50%
            ),
            #1d232c;
    color: rgba(255, 255, 255, .16);
}

.moledro-page-videos .moledro-video-placeholder i {
    font-size: 90px;
}

/* ============================================================
   PLAY BUTTON
============================================================ */

.moledro-page-videos .moledro-video-play {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--mv-dark);
    font-size: 31px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
}

.moledro-page-videos .moledro-video-external:hover .moledro-video-play {
    background: var(--mv-blue);
    color: #fff;
    transform: scale(1.08);
}

/* ============================================================
   EXTERNAL LABEL
============================================================ */

.moledro-page-videos .moledro-video-external-label {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(23, 25, 29, .8);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

/* ============================================================
   VIDEO CONTENT
============================================================ */

.moledro-page-videos .moledro-video-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 23px 25px 26px;
}

.moledro-page-videos .moledro-video-content h3 {
    margin: 0;
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.35px;
    overflow-wrap: anywhere;
}

.moledro-page-videos .moledro-video-content p {
    display: -webkit-box;
    margin: 12px 0 0;
    overflow: hidden;
    color: var(--mv-muted);
    font-size: 13px;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-page-videos .moledro-video-external:focus-visible {
    outline: 3px solid var(--mv-blue);
    outline-offset: -3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-page-videos .moledro-videos-grid {
        gap: 18px;
    }

    .moledro-page-videos .moledro-video-content {
        padding: 20px;
    }

    .moledro-page-videos .moledro-video-content h3 {
        font-size: 16px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-page-videos .moledro-videos-heading {
        margin-bottom: 23px;
    }

    .moledro-page-videos .moledro-videos-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-page-videos .moledro-videos-kicker-line {
        width: 20px;
    }

    .moledro-page-videos .moledro-videos-heading h2 {
        font-size: 28px;
    }

    .moledro-page-videos .moledro-videos-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-page-videos .moledro-videos-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .moledro-page-videos .moledro-video-card {
        border-radius: 11px;
    }

    .moledro-page-videos .moledro-video-content {
        padding: 19px 20px 21px;
    }

    .moledro-page-videos .moledro-video-content h3 {
        font-size: 16px;
    }

    .moledro-page-videos .moledro-video-content p {
        font-size: 12px;
    }

    .moledro-page-videos .moledro-video-play {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-page-videos .moledro-video-card,
    .moledro-page-videos .moledro-video-external > img,
    .moledro-page-videos .moledro-video-play {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCTS PAGE | FINAL CSS
============================================================ */

.moledro-products-page {
    --mp-blue: #4db4dc;
    --mp-pink: #d52c83;
    --mp-yellow: #e8c51d;
    --mp-dark: #17191d;
    --mp-text: #4d5562;
    --mp-muted: #747d89;
    --mp-border: #e8eaee;
    --mp-light: #f7f8fa;

    width: 100%;
    font-family: 'Inter', sans-serif;
}

.moledro-products-page .site-content-container {
    width: 100%;
    max-width: var(--site-max-width, 1440px);
    margin: 0 auto;
    padding: 0 var(--site-gutter, 30px);
}

/* PAGE HEADER */

.moledro-products-page .moledro-products-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin: 0 0 40px;
}

.moledro-products-page .moledro-products-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--mp-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-products-page .moledro-products-kicker > span {
    width: 28px;
    height: 2px;
    background: var(--mp-blue);
}

.moledro-products-page .moledro-products-heading h1 {
    margin: 0;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.15;
}

.moledro-products-page .moledro-products-heading > p {
    max-width: 400px;
    margin: 0;
    color: var(--mp-muted);
    font-size: 14px;
    line-height: 1.85;
}

/* TOOLBAR */

.moledro-products-page .moledro-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    padding: 19px 0;
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}

.moledro-products-page .products-result-heading h3 {
    margin: 0 0 5px;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.moledro-products-page .products-result-heading p {
    margin: 0;
    color: var(--mp-muted);
    font-size: 12px;
}

.moledro-products-page .products-result-tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

.moledro-products-page .moledro-products-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mp-muted);
    font-size: 12px;
    white-space: nowrap;
}

.moledro-products-page .moledro-products-count strong {
    color: var(--mp-dark);
    font-size: 14px;
    font-weight: 800;
}

/* VIEW SWITCHER */

.moledro-products-page .moledro-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--mp-border);
    border-radius: 9px;
    background: var(--mp-light);
}

.moledro-products-page .product-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mp-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.moledro-products-page .product-view-button.active {
    background: #fff;
    color: var(--mp-dark);
    box-shadow: 0 2px 8px rgba(23, 25, 29, .08);
}

/* GRID */

.moledro-products-page .moledro-products-container.products-grid-view {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* PRODUCT ITEM */

.moledro-products-page .moledro-product-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 13px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-products-page .moledro-product-item:hover {
    border-color: #d4e9f2;
    box-shadow: 0 12px 28px rgba(23, 25, 29, .055);
    transform: translateY(-2px);
}

/* CARD LINK */

.moledro-products-page .moledro-product-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.moledro-products-page .moledro-product-card:hover {
    color: inherit;
}

/* IMAGE */

.moledro-products-page .moledro-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f7f8fa;
}

.moledro-products-page .moledro-product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform .3s ease;
}

.moledro-products-page .moledro-product-item:hover
.moledro-product-image img {
    transform: scale(1.04);
}

.moledro-products-page .moledro-product-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #c6cbd2;
    font-size: 52px;
}

.moledro-products-page .moledro-product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 7px 10px;
    border-radius: 5px;
    background: var(--mp-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

/* PRODUCT CONTENT */

.moledro-products-page .moledro-product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 22px;
}

.moledro-products-page .moledro-product-category {
    margin-bottom: 10px;
    color: var(--mp-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.moledro-products-page .moledro-product-content h3 {
    margin: 0;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.moledro-products-page .moledro-product-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--mp-muted);
    font-size: 11px;
}

.moledro-products-page .moledro-product-code strong {
    color: var(--mp-text);
    font-weight: 800;
}

.moledro-products-page .moledro-product-description {
    display: -webkit-box;
    margin: 13px 0 0;
    overflow: hidden;
    color: var(--mp-muted);
    font-size: 12px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* PRODUCT ACTION */

.moledro-products-page .moledro-product-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 23px;
    color: var(--mp-dark);
    font-size: 12px;
    font-weight: 800;
}

.moledro-products-page .product-view-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 1px solid var(--mp-border);
    border-radius: 7px;
    color: var(--mp-dark);
    font-size: 15px;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-products-page .moledro-product-card:hover
.product-view-action-icon {
    border-color: var(--mp-blue);
    background: var(--mp-blue);
    color: #fff;
}

/* QUOTE / CART ACTIONS */

.moledro-products-page .moledro-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 0 22px 22px;
}

.moledro-products-page .moledro-product-actions form {
    width: 100%;
    margin: 0;
}

.moledro-products-page .moledro-quote-button,
.moledro-products-page .moledro-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 43px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-products-page .moledro-quote-button {
    border: 1px solid var(--mp-border);
    background: #fff;
    color: var(--mp-dark);
}

.moledro-products-page .moledro-quote-button:hover {
    border-color: var(--mp-blue);
    background: #eef8fc;
    color: #238fb9;
}

.moledro-products-page .moledro-cart-button {
    border: 1px solid var(--mp-dark);
    background: var(--mp-dark);
    color: #fff;
}

.moledro-products-page .moledro-cart-button:hover {
    border-color: var(--mp-blue);
    background: var(--mp-blue);
    color: #fff;
}

/* LIST VIEW */

.moledro-products-page .moledro-products-container.products-list-view {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.moledro-products-page .products-list-view .moledro-product-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: stretch;
}

.moledro-products-page .products-list-view .moledro-product-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
}

.moledro-products-page .products-list-view .moledro-product-image {
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto;
}

.moledro-products-page .products-list-view .moledro-product-content {
    padding: 25px;
}

.moledro-products-page .products-list-view .moledro-product-action {
    margin-top: 15px;
}

.moledro-products-page .products-list-view .moledro-product-actions {
    align-content: center;
    padding: 20px;
    border-left: 1px solid var(--mp-border);
}

/* PAGINATION */

.moledro-products-page .moledro-product-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 45px;
}

.moledro-products-page .moledro-product-pagination a,
.moledro-products-page .moledro-product-pagination .pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 41px;
    height: 41px;
    padding: 0 11px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    background: #fff;
    color: var(--mp-text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.moledro-products-page .moledro-product-pagination a:hover,
.moledro-products-page .moledro-product-pagination a.active {
    border-color: var(--mp-dark);
    background: var(--mp-dark);
    color: #fff;
}

.moledro-products-page .moledro-product-pagination .pagination-dots {
    border-color: transparent;
}

/* EMPTY STATE */

.moledro-products-page .moledro-products-empty {
    padding: 65px 25px;
    border: 1px dashed #d9dee5;
    border-radius: 13px;
    background: var(--mp-light);
    text-align: center;
}

.moledro-products-page .moledro-products-empty > i {
    color: var(--mp-blue);
    font-size: 48px;
}

.moledro-products-page .moledro-products-empty h3 {
    margin: 17px 0 8px;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.moledro-products-page .moledro-products-empty p {
    margin: 0;
    color: var(--mp-muted);
    font-size: 13px;
}

/* TABLET */

@media (max-width: 1199.98px) {

    .moledro-products-page .moledro-products-container.products-grid-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .moledro-products-page .products-list-view .moledro-product-card {
        grid-template-columns: 190px minmax(0, 1fr);
    }
}

/* MOBILE */

@media (max-width: 767.98px) {

    .moledro-products-page .site-content-container {
        padding: 0 15px;
    }

    .moledro-products-page .moledro-products-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 28px;
    }

    .moledro-products-page .moledro-products-heading h1 {
        font-size: 32px;
    }

    .moledro-products-page .moledro-products-heading > p {
        font-size: 13px;
    }

    .moledro-products-page .moledro-products-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
    }

    .moledro-products-page .products-result-tools {
        justify-content: space-between;
        gap: 10px;
    }

    .moledro-products-page .moledro-products-container.products-grid-view {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .moledro-products-page .products-list-view .moledro-product-item {
        grid-template-columns: 1fr;
    }

    .moledro-products-page .products-list-view .moledro-product-card {
        grid-template-columns: 125px minmax(0, 1fr);
    }

    .moledro-products-page .products-list-view .moledro-product-image {
        min-height: 160px;
    }

    .moledro-products-page .products-list-view .moledro-product-content {
        padding: 15px;
    }

    .moledro-products-page .products-list-view .moledro-product-content h3 {
        font-size: 14px;
    }

    .moledro-products-page .products-list-view .moledro-product-description {
        display: none;
    }

    .moledro-products-page .products-list-view .moledro-product-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--mp-border);
        border-left: 0;
        padding: 12px;
    }

    .moledro-products-page .moledro-product-content {
        padding: 19px;
    }

    .moledro-products-page .moledro-product-actions {
        padding: 0 19px 19px;
    }

    .moledro-products-page .moledro-product-pagination {
        margin-top: 30px;
    }
}

/* SMALL MOBILE */

@media (max-width: 399.98px) {

    .moledro-products-page .product-view-button span {
        display: none;
    }

    .moledro-products-page .products-list-view .moledro-product-card {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .moledro-products-page .products-list-view .moledro-product-image {
        min-height: 145px;
    }

    .moledro-products-page .products-list-view .moledro-product-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .moledro-products-page .moledro-product-item,
    .moledro-products-page .moledro-product-image img,
    .moledro-products-page .product-view-action-icon {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT DETAIL PAGE | FINAL CSS
============================================================ */

.moledro-product-detail {
    --pd-blue: #4db4dc;
    --pd-pink: #d52c83;
    --pd-yellow: #e8c51d;
    --pd-dark: #17191d;
    --pd-text: #4d5562;
    --pd-muted: #747d89;
    --pd-border: #e8eaee;
    --pd-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    background: #fff;
    color: var(--pd-text);
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   MAIN
============================================================ */

.moledro-product-detail .moledro-product-main {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* ============================================================
   CONTENT CONTAINER
============================================================ */

.moledro-product-detail .moledro-product-container {
    width: 100%;
    max-width: var(--site-max-width, 1440px);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--site-gutter, 30px);
    padding-left: var(--site-gutter, 30px);
}

/* ============================================================
   PRODUCT SUMMARY
============================================================ */

.moledro-product-detail .moledro-product-summary-section {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 55px 0 65px;
}

/* ============================================================
   CONTENT SECTIONS
============================================================ */

.moledro-product-detail .moledro-product-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 65px 0;
    background: #fff;
}

.moledro-product-detail .moledro-product-section + .moledro-product-section {
    border-top: 1px solid #f0f1f3;
}

/* ============================================================
   VARIANTS
============================================================ */

.moledro-product-detail .product-variants-section {
    padding-top: 45px;
    padding-bottom: 55px;
}

/* ============================================================
   SLIDER SECTION
============================================================ */

.moledro-product-detail .product-slides-section {
    padding-top: 35px;
    padding-bottom: 35px;
    overflow: hidden;
}

/* ============================================================
   CONTENT SECTION
============================================================ */

.moledro-product-detail .product-contents-section {
    background: #fff;
}

/* ============================================================
   TECHNICAL SECTION
============================================================ */

.moledro-product-detail .product-technical-section {
    background: #fafbfc;
}

/* ============================================================
   TABS SECTION
============================================================ */

.moledro-product-detail .product-tabs-section {
    background: #fff;
}

/* ============================================================
   GALLERY SECTION
============================================================ */

.moledro-product-detail .product-gallery-section {
    background: #fafbfc;
}

/* ============================================================
   VIDEOS SECTION
============================================================ */

.moledro-product-detail .product-videos-section {
    background: #fff;
}

/* ============================================================
   ACCORDIONS SECTION
============================================================ */

.moledro-product-detail .product-accordions-section {
    background: #fafbfc;
}

/* ============================================================
   DOCUMENTS SECTION
============================================================ */

.moledro-product-detail .product-documents-section {
    background: #fff;
}

/* ============================================================
   CODES SECTION
============================================================ */

.moledro-product-detail .product-codes-section {
    background: #fafbfc;
}

/* ============================================================
   RELATED PRODUCTS
============================================================ */

.moledro-product-detail .moledro-product-related-section {
    background: #f7f8fa;
    border-top: 1px solid var(--pd-border);
}

/* ============================================================
   SECTION HEADINGS
============================================================ */

.moledro-product-detail .page-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-detail .page-section-heading h2 {
    margin: 0;
    color: var(--pd-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   TYPOGRAPHY
============================================================ */

.moledro-product-detail h1,
.moledro-product-detail h2,
.moledro-product-detail h3,
.moledro-product-detail h4 {
    font-family: 'Manrope', sans-serif;
}

.moledro-product-detail img {
    max-width: 100%;
}

.moledro-product-detail a,
.moledro-product-detail button {
    -webkit-tap-highlight-color: transparent;
}

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

@media (max-width: 991.98px) {

    .moledro-product-detail .moledro-product-summary-section {
        padding: 40px 0 50px;
    }

    .moledro-product-detail .moledro-product-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .moledro-product-detail .moledro-product-container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .moledro-product-detail .page-section-heading h2 {
        font-size: 32px;
    }
}

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

@media (max-width: 767.98px) {

    .moledro-product-detail .moledro-product-summary-section {
        padding: 28px 0 38px;
    }

    .moledro-product-detail .moledro-product-section {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .moledro-product-detail .moledro-product-container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .moledro-product-detail .page-section-heading {
        gap: 15px;
        margin-bottom: 23px;
    }

    .moledro-product-detail .page-section-heading h2 {
        font-size: 27px;
    }

    .moledro-product-detail .product-slides-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .moledro-product-detail .product-variants-section {
        padding-top: 30px;
        padding-bottom: 35px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-detail .moledro-product-container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .moledro-product-detail .page-section-heading h2 {
        font-size: 25px;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT ACCORDIONS | FINAL CSS
============================================================ */

.moledro-product-accordions {
    --ma-blue: #4db4dc;
    --ma-pink: #d52c83;
    --ma-yellow: #e8c51d;
    --ma-dark: #17191d;
    --ma-text: #4d5562;
    --ma-muted: #747d89;
    --ma-border: #e8eaee;
    --ma-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-accordions .moledro-accordion-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-accordions .moledro-accordion-heading-content {
    min-width: 0;
}

.moledro-product-accordions .moledro-accordion-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--ma-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-accordions .moledro-accordion-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--ma-blue);
}

.moledro-product-accordions .moledro-accordion-heading h2 {
    margin: 0;
    color: var(--ma-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-product-accordions .moledro-accordion-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ma-border);
    border-radius: 9px;
    background: #fff;
    color: var(--ma-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   ACCORDION LIST
============================================================ */

.moledro-product-accordions .moledro-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

/* ============================================================
   ACCORDION ITEM
============================================================ */

.moledro-product-accordions .moledro-accordion-item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ma-border);
    border-radius: 11px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease;
}

.moledro-product-accordions .moledro-accordion-item:hover {
    border-color: #d6e7ef;
}

.moledro-product-accordions .moledro-accordion-item.is-open {
    border-color: #cce5f0;
    box-shadow: 0 7px 22px rgba(23, 25, 29, .035);
}

/* ============================================================
   ACCORDION BUTTON
============================================================ */

.moledro-product-accordions .moledro-accordion-button {
    display: flex;
    align-items: center;
    gap: 17px;
    width: 100%;
    min-height: 78px;
    margin: 0;
    padding: 19px 23px;
    border: 0;
    background: transparent;
    color: var(--ma-dark);
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: background .2s ease;
}

.moledro-product-accordions .moledro-accordion-button:hover {
    background: #fafcfd;
}

.moledro-product-accordions .moledro-accordion-item.is-open
.moledro-accordion-button {
    background: #f7fbfd;
}

/* ============================================================
   ACCORDION NUMBER
============================================================ */

.moledro-product-accordions .moledro-accordion-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ma-border);
    border-radius: 8px;
    background: var(--ma-light);
    color: var(--ma-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-accordions .moledro-accordion-item.is-open
.moledro-accordion-number {
    border-color: var(--ma-blue);
    background: var(--ma-blue);
    color: #fff;
}

/* ============================================================
   ACCORDION TITLE
============================================================ */

.moledro-product-accordions .moledro-accordion-title {
    display: block;
    flex: 1;
    min-width: 0;
    color: var(--ma-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ============================================================
   ACCORDION ICON
============================================================ */

.moledro-product-accordions .moledro-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border: 1px solid var(--ma-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ma-dark);
    font-size: 17px;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-accordions .moledro-accordion-icon i {
    display: block;
    line-height: 1;
    transition: transform .2s ease;
}

.moledro-product-accordions .moledro-accordion-item.is-open
.moledro-accordion-icon {
    border-color: var(--ma-blue);
    background: var(--ma-blue);
    color: #fff;
}

.moledro-product-accordions .moledro-accordion-item.is-open
.moledro-accordion-icon i {
    transform: rotate(45deg);
}

/* ============================================================
   ACCORDION CONTENT
============================================================ */

.moledro-product-accordions .moledro-accordion-content {
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--ma-border);
    background: #fff;
}

.moledro-product-accordions .moledro-accordion-content[hidden] {
    display: none !important;
}

/* ============================================================
   ACCORDION BODY
============================================================ */

.moledro-product-accordions .moledro-accordion-body {
    min-width: 0;
    padding: 25px 30px 28px 80px;
    color: var(--ma-text);
    font-size: 14px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.moledro-product-accordions .moledro-accordion-body p {
    margin: 0 0 15px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-product-accordions .moledro-accordion-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   RICH TEXT HEADINGS
============================================================ */

.moledro-product-accordions .moledro-accordion-body h2,
.moledro-product-accordions .moledro-accordion-body h3,
.moledro-product-accordions .moledro-accordion-body h4 {
    margin: 22px 0 11px;
    color: var(--ma-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.4;
}

.moledro-product-accordions .moledro-accordion-body h2 {
    font-size: 22px;
}

.moledro-product-accordions .moledro-accordion-body h3 {
    font-size: 19px;
}

.moledro-product-accordions .moledro-accordion-body h4 {
    font-size: 16px;
}

/* ============================================================
   LISTS
============================================================ */

.moledro-product-accordions .moledro-accordion-body ul,
.moledro-product-accordions .moledro-accordion-body ol {
    margin: 12px 0 18px;
    padding-left: 22px;
}

.moledro-product-accordions .moledro-accordion-body li {
    margin-bottom: 8px;
    line-height: 1.8;
}

.moledro-product-accordions .moledro-accordion-body li::marker {
    color: var(--ma-blue);
}

/* ============================================================
   LINKS
============================================================ */

.moledro-product-accordions .moledro-accordion-body a {
    color: #258eb8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-product-accordions .moledro-accordion-body a:hover {
    color: var(--ma-pink);
}

/* ============================================================
   IMAGES
============================================================ */

.moledro-product-accordions .moledro-accordion-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ============================================================
   TABLES
============================================================ */

.moledro-product-accordions .moledro-accordion-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 18px 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 13px;
}

.moledro-product-accordions .moledro-accordion-body th,
.moledro-product-accordions .moledro-accordion-body td {
    padding: 11px 13px;
    border: 1px solid var(--ma-border);
    text-align: left;
    vertical-align: middle;
}

.moledro-product-accordions .moledro-accordion-body th {
    background: var(--ma-light);
    color: var(--ma-dark);
    font-weight: 800;
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-product-accordions .moledro-accordion-button:focus-visible {
    outline: 3px solid var(--ma-blue);
    outline-offset: -3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-accordions .moledro-accordion-button {
        min-height: 70px;
        padding: 17px 20px;
    }

    .moledro-product-accordions .moledro-accordion-body {
        padding: 22px 25px 25px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-accordions .moledro-accordion-heading {
        margin-bottom: 23px;
    }

    .moledro-product-accordions .moledro-accordion-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-product-accordions .moledro-accordion-kicker-line {
        width: 20px;
    }

    .moledro-product-accordions .moledro-accordion-heading h2 {
        font-size: 28px;
    }

    .moledro-product-accordions .moledro-accordion-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-product-accordions .moledro-accordion-list {
        gap: 10px;
    }

    .moledro-product-accordions .moledro-accordion-button {
        min-height: 65px;
        gap: 12px;
        padding: 14px 15px;
    }

    .moledro-product-accordions .moledro-accordion-number {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .moledro-product-accordions .moledro-accordion-title {
        font-size: 14px;
    }

    .moledro-product-accordions .moledro-accordion-icon {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
        font-size: 15px;
    }

    .moledro-product-accordions .moledro-accordion-body {
        padding: 19px 18px 22px;
        font-size: 13px;
        line-height: 1.85;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-accordions .moledro-accordion-button {
        gap: 10px;
        padding: 13px;
    }

    .moledro-product-accordions .moledro-accordion-title {
        font-size: 13px;
    }

    .moledro-product-accordions .moledro-accordion-body {
        padding: 17px 15px 20px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-accordions .moledro-accordion-item,
    .moledro-product-accordions .moledro-accordion-button,
    .moledro-product-accordions .moledro-accordion-number,
    .moledro-product-accordions .moledro-accordion-icon,
    .moledro-product-accordions .moledro-accordion-icon i {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT CODES | FINAL CSS
============================================================ */

.moledro-product-codes {
    --mc-blue: #4db4dc;
    --mc-pink: #d52c83;
    --mc-yellow: #e8c51d;
    --mc-dark: #17191d;
    --mc-text: #4d5562;
    --mc-muted: #747d89;
    --mc-border: #e8eaee;
    --mc-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-codes .moledro-codes-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-codes .moledro-codes-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mc-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.5;
}

.moledro-product-codes .moledro-codes-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mc-blue);
}

.moledro-product-codes .moledro-codes-heading h2 {
    margin: 0;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-product-codes .moledro-codes-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mc-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   GRID
============================================================ */

.moledro-product-codes .moledro-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* ============================================================
   CODE CARD
============================================================ */

.moledro-product-codes .moledro-code-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 190px;
    margin: 0;
    padding: 25px;
    overflow: hidden;
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-product-codes .moledro-code-item:hover {
    border-color: #cfe7f1;
    box-shadow: 0 12px 26px rgba(23, 25, 29, .05);
    transform: translateY(-2px);
}

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

.moledro-product-codes .moledro-code-item-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
}

.moledro-product-codes .moledro-code-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #dcecf3;
    border-radius: 7px;
    background: #eff8fc;
    color: var(--mc-blue);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.moledro-product-codes .moledro-code-item-label {
    color: var(--mc-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* ============================================================
   TITLE
============================================================ */

.moledro-product-codes .moledro-code-title {
    margin-bottom: 13px;
    color: var(--mc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ============================================================
   CODE VALUE
============================================================ */

.moledro-product-codes .moledro-code-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin-bottom: 13px;
    padding: 9px 9px 9px 15px;
    border: 1px solid #e5eaf0;
    border-radius: 9px;
    background: var(--mc-light);
}

.moledro-product-codes .moledro-code-value code {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--mc-dark);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

/* ============================================================
   COPY BUTTON
============================================================ */

.moledro-product-codes .moledro-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 35px;
    padding: 8px 12px;
    border: 1px solid var(--mc-dark);
    border-radius: 6px;
    background: var(--mc-dark);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-codes .moledro-code-copy:hover {
    border-color: var(--mc-blue);
    background: var(--mc-blue);
}

.moledro-product-codes .moledro-code-copy.is-copied {
    border-color: #16845b;
    background: #16845b;
    color: #fff;
}

.moledro-product-codes .moledro-code-copy.is-error {
    border-color: #bb3948;
    background: #bb3948;
    color: #fff;
}

.moledro-product-codes .moledro-code-copy i {
    font-size: 13px;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-product-codes .moledro-code-description {
    margin-top: 2px;
    padding-bottom: 13px;
    color: var(--mc-text);
    font-size: 13px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

/* ============================================================
   DECORATION
============================================================ */

.moledro-product-codes .moledro-code-decoration {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 12px;
}

.moledro-product-codes .moledro-code-decoration span {
    display: block;
    height: 3px;
    border-radius: 3px;
}

.moledro-product-codes .moledro-code-decoration span:nth-child(1) {
    width: 17px;
    background: var(--mc-blue);
}

.moledro-product-codes .moledro-code-decoration span:nth-child(2) {
    width: 10px;
    background: var(--mc-pink);
}

.moledro-product-codes .moledro-code-decoration span:nth-child(3) {
    width: 6px;
    background: var(--mc-yellow);
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-product-codes .moledro-code-copy:focus-visible {
    outline: 3px solid var(--mc-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-codes .moledro-codes-grid {
        gap: 15px;
    }

    .moledro-product-codes .moledro-code-item {
        padding: 21px;
    }

    .moledro-product-codes .moledro-code-value {
        flex-wrap: wrap;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-codes .moledro-codes-heading {
        margin-bottom: 23px;
    }

    .moledro-product-codes .moledro-codes-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-product-codes .moledro-codes-kicker-line {
        width: 20px;
    }

    .moledro-product-codes .moledro-codes-heading h2 {
        font-size: 27px;
    }

    .moledro-product-codes .moledro-codes-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-product-codes .moledro-codes-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .moledro-product-codes .moledro-code-item {
        min-height: 0;
        padding: 20px;
    }

    .moledro-product-codes .moledro-code-title {
        font-size: 16px;
    }

    .moledro-product-codes .moledro-code-description {
        font-size: 12px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-codes .moledro-code-item {
        padding: 17px;
    }

    .moledro-product-codes .moledro-code-value {
        padding: 9px;
    }

    .moledro-product-codes .moledro-code-value code {
        font-size: 12px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-codes .moledro-code-item,
    .moledro-product-codes .moledro-code-copy {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT CONTENTS | FINAL CSS
============================================================ */

.moledro-product-contents {
    --pc-blue: #4db4dc;
    --pc-pink: #d52c83;
    --pc-yellow: #e8c51d;
    --pc-dark: #17191d;
    --pc-text: #4d5562;
    --pc-muted: #747d89;
    --pc-border: #e8eaee;
    --pc-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-contents .moledro-contents-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.moledro-product-contents .moledro-contents-heading-content {
    min-width: 0;
}

.moledro-product-contents .moledro-contents-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--pc-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-contents .moledro-contents-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--pc-blue);
}

.moledro-product-contents .moledro-contents-heading h2 {
    margin: 0;
    color: var(--pc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-product-contents .moledro-contents-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pc-border);
    border-radius: 9px;
    background: var(--pc-light);
    color: var(--pc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   CONTENT LIST
============================================================ */

.moledro-product-contents .moledro-contents-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

/* ============================================================
   CONTENT ITEM
============================================================ */

.moledro-product-contents .moledro-content-item {
    display: flex;
    align-items: flex-start;
    gap: 23px;
    min-width: 0;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--pc-border);
    border-radius: 12px;
    background: #fff;
    scroll-margin-top: 100px;
    transition:
            border-color .2s ease,
            box-shadow .2s ease;
}

.moledro-product-contents .moledro-content-item:hover {
    border-color: #d6eaf3;
    box-shadow: 0 10px 25px rgba(23, 25, 29, .04);
}

/* ============================================================
   CONTENT NUMBER
============================================================ */

.moledro-product-contents .moledro-content-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid #dcecf3;
    border-radius: 9px;
    background: #eff8fc;
    color: var(--pc-blue);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   CONTENT INNER
============================================================ */

.moledro-product-contents .moledro-content-inner {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   CONTENT TITLE
============================================================ */

.moledro-product-contents .moledro-content-title {
    margin: 4px 0 17px;
    color: var(--pc-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.4px;
    overflow-wrap: anywhere;
}

/* ============================================================
   RICH TEXT CONTENT
============================================================ */

.moledro-product-contents .moledro-content-body {
    min-width: 0;
    color: var(--pc-text);
    font-size: 14px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.moledro-product-contents .moledro-content-body p {
    margin: 0 0 17px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.moledro-product-contents .moledro-content-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   RICH TEXT HEADINGS
============================================================ */

.moledro-product-contents .moledro-content-body h2,
.moledro-product-contents .moledro-content-body h3,
.moledro-product-contents .moledro-content-body h4,
.moledro-product-contents .moledro-content-body h5 {
    margin: 24px 0 12px;
    color: var(--pc-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.4;
}

.moledro-product-contents .moledro-content-body h2 {
    font-size: 24px;
}

.moledro-product-contents .moledro-content-body h3 {
    font-size: 20px;
}

.moledro-product-contents .moledro-content-body h4 {
    font-size: 17px;
}

.moledro-product-contents .moledro-content-body h5 {
    font-size: 15px;
}

/* ============================================================
   LISTS
============================================================ */

.moledro-product-contents .moledro-content-body ul,
.moledro-product-contents .moledro-content-body ol {
    margin: 14px 0 20px;
    padding-left: 23px;
}

.moledro-product-contents .moledro-content-body li {
    margin-bottom: 8px;
    line-height: 1.85;
}

.moledro-product-contents .moledro-content-body li::marker {
    color: var(--pc-blue);
}

/* ============================================================
   LINKS
============================================================ */

.moledro-product-contents .moledro-content-body a {
    color: #258eb8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-product-contents .moledro-content-body a:hover {
    color: var(--pc-pink);
}

/* ============================================================
   IMAGES
============================================================ */

.moledro-product-contents .moledro-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 9px;
}

.moledro-product-contents .moledro-content-body figure {
    max-width: 100%;
    margin: 20px 0;
}

.moledro-product-contents .moledro-content-body figcaption {
    margin-top: 9px;
    color: var(--pc-muted);
    font-size: 12px;
    text-align: center;
}

/* ============================================================
   TABLES
============================================================ */

.moledro-product-contents .moledro-content-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 13px;
}

.moledro-product-contents .moledro-content-body th,
.moledro-product-contents .moledro-content-body td {
    padding: 12px 14px;
    border: 1px solid var(--pc-border);
    text-align: left;
    vertical-align: middle;
}

.moledro-product-contents .moledro-content-body th {
    background: var(--pc-light);
    color: var(--pc-dark);
    font-weight: 800;
}

/* ============================================================
   BLOCKQUOTE
============================================================ */

.moledro-product-contents .moledro-content-body blockquote {
    margin: 22px 0;
    padding: 17px 22px;
    border-left: 3px solid var(--pc-blue);
    border-radius: 0 8px 8px 0;
    background: var(--pc-light);
    color: var(--pc-text);
    font-style: italic;
}

/* ============================================================
   EMBEDS
============================================================ */

.moledro-product-contents .moledro-content-body iframe {
    max-width: 100%;
}

.moledro-product-contents .moledro-content-body video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-contents .moledro-content-item {
        padding: 25px;
        gap: 19px;
    }

    .moledro-product-contents .moledro-content-body {
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-contents .moledro-contents-heading {
        margin-bottom: 23px;
    }

    .moledro-product-contents .moledro-contents-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-product-contents .moledro-contents-kicker-line {
        width: 20px;
    }

    .moledro-product-contents .moledro-contents-heading h2 {
        font-size: 28px;
    }

    .moledro-product-contents .moledro-contents-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-product-contents .moledro-contents-list {
        gap: 13px;
    }

    .moledro-product-contents .moledro-content-item {
        gap: 14px;
        padding: 20px;
        border-radius: 10px;
    }

    .moledro-product-contents .moledro-content-number {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .moledro-product-contents .moledro-content-title {
        margin-top: 3px;
        margin-bottom: 12px;
        font-size: 18px;
    }

    .moledro-product-contents .moledro-content-body {
        font-size: 12px;
        line-height: 1.85;
    }

    .moledro-product-contents .moledro-content-body h2 {
        font-size: 20px;
    }

    .moledro-product-contents .moledro-content-body h3 {
        font-size: 18px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-contents .moledro-content-item {
        padding: 16px;
        gap: 11px;
    }

    .moledro-product-contents .moledro-content-number {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .moledro-product-contents .moledro-content-title {
        font-size: 16px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-contents .moledro-content-item {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT DOCUMENTS | FINAL CSS
============================================================ */

.moledro-product-documents {
    --md-blue: #4db4dc;
    --md-pink: #d52c83;
    --md-yellow: #e8c51d;
    --md-dark: #17191d;
    --md-text: #4d5562;
    --md-muted: #747d89;
    --md-border: #e8eaee;
    --md-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-documents .moledro-documents-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-documents .moledro-documents-heading-content {
    min-width: 0;
}

.moledro-product-documents .moledro-documents-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--md-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-documents .moledro-documents-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--md-blue);
}

.moledro-product-documents .moledro-documents-heading h2 {
    margin: 0;
    color: var(--md-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ============================================================
   COUNT
============================================================ */

.moledro-product-documents .moledro-documents-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--md-border);
    border-radius: 9px;
    background: #fff;
    color: var(--md-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   DOCUMENT GRID
============================================================ */

.moledro-product-documents .moledro-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* ============================================================
   DOCUMENT CARD
============================================================ */

.moledro-product-documents .moledro-document-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 235px;
    margin: 0;
    padding: 25px;
    border: 1px solid var(--md-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-product-documents .moledro-document-item:hover {
    border-color: #cfe7f1;
    box-shadow: 0 12px 27px rgba(23, 25, 29, .05);
    transform: translateY(-2px);
}

/* ============================================================
   DOCUMENT ICON
============================================================ */

.moledro-product-documents .moledro-document-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: auto;
    min-height: 47px;
    margin-bottom: 19px;
    padding: 9px 12px;
    border: 1px solid #dcecf3;
    border-radius: 9px;
    background: #eff8fc;
    color: var(--md-blue);
}

.moledro-product-documents .moledro-document-icon i {
    font-size: 23px;
    line-height: 1;
}

.moledro-product-documents .moledro-document-icon span {
    color: #278eb7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* ============================================================
   DOCUMENT CONTENT
============================================================ */

.moledro-product-documents .moledro-document-content {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.moledro-product-documents .moledro-document-label {
    display: block;
    margin-bottom: 9px;
    color: var(--md-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.moledro-product-documents .moledro-document-content h3 {
    margin: 0;
    color: var(--md-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.moledro-product-documents .moledro-document-content p {
    margin: 11px 0 0;
    color: var(--md-text);
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.moledro-product-documents .moledro-document-filename {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    margin-top: 13px;
    color: var(--md-muted);
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.moledro-product-documents .moledro-document-filename i {
    flex-shrink: 0;
    color: var(--md-blue);
}

/* ============================================================
   DOCUMENT ACTIONS
============================================================ */

.moledro-product-documents .moledro-document-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 23px;
    padding-top: 18px;
    border-top: 1px solid var(--md-border);
}

.moledro-product-documents .moledro-document-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--md-dark);
    border-radius: 8px;
    background: var(--md-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease;
}

.moledro-product-documents .moledro-document-view:hover {
    border-color: var(--md-blue);
    background: var(--md-blue);
    color: #fff;
}

.moledro-product-documents .moledro-document-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--md-border);
    border-radius: 8px;
    background: var(--md-light);
    color: var(--md-dark);
    font-size: 16px;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-documents .moledro-document-download:hover {
    border-color: var(--md-blue);
    background: #eff8fc;
    color: #238fb9;
}

/* ============================================================
   KEYBOARD FOCUS
============================================================ */

.moledro-product-documents .moledro-document-view:focus-visible,
.moledro-product-documents .moledro-document-download:focus-visible {
    outline: 3px solid var(--md-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-documents .moledro-documents-grid {
        gap: 15px;
    }

    .moledro-product-documents .moledro-document-item {
        padding: 21px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-documents .moledro-documents-heading {
        margin-bottom: 23px;
    }

    .moledro-product-documents .moledro-documents-kicker {
        font-size: 9px;
        letter-spacing: .8px;
    }

    .moledro-product-documents .moledro-documents-kicker-line {
        width: 20px;
    }

    .moledro-product-documents .moledro-documents-heading h2 {
        font-size: 27px;
    }

    .moledro-product-documents .moledro-documents-count {
        min-width: 39px;
        height: 39px;
        font-size: 13px;
    }

    .moledro-product-documents .moledro-documents-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .moledro-product-documents .moledro-document-item {
        min-height: 0;
        padding: 20px;
    }

    .moledro-product-documents .moledro-document-content h3 {
        font-size: 16px;
    }

    .moledro-product-documents .moledro-document-actions {
        margin-top: 19px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-documents .moledro-document-item {
        padding: 17px;
    }

    .moledro-product-documents .moledro-document-content h3 {
        font-size: 15px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-documents .moledro-document-item,
    .moledro-product-documents .moledro-document-view,
    .moledro-product-documents .moledro-document-download {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT GALLERY | FINAL CSS
============================================================ */

.moledro-product-gallery {
    --mg-blue: #4db4dc;
    --mg-pink: #d52c83;
    --mg-dark: #17191d;
    --mg-text: #4d5562;
    --mg-muted: #747d89;
    --mg-border: #e8eaee;
    --mg-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* SECTION HEADING */

.moledro-product-gallery .moledro-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-gallery .moledro-gallery-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mg-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.moledro-product-gallery .moledro-gallery-kicker-line {
    width: 27px;
    height: 2px;
    background: var(--mg-blue);
}

.moledro-product-gallery .moledro-gallery-heading h2 {
    margin: 0;
    color: var(--mg-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-gallery .moledro-gallery-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mg-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mg-dark);
    font-size: 14px;
    font-weight: 800;
}

/* GRID */

.moledro-product-gallery .moledro-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* GALLERY CARD */

.moledro-product-gallery .moledro-gallery-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-product-gallery .moledro-gallery-item:hover {
    border-color: #cfe7f1;
    box-shadow: 0 12px 27px rgba(23, 25, 29, .05);
    transform: translateY(-2px);
}

/* IMAGE */

.moledro-product-gallery .moledro-gallery-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--mg-light);
    cursor: zoom-in;
}

.moledro-product-gallery .moledro-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform .3s ease;
}

.moledro-product-gallery .moledro-gallery-item:hover
.moledro-gallery-image img {
    transform: scale(1.045);
}

.moledro-product-gallery .moledro-gallery-zoom {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--mg-dark);
    color: #fff;
    font-size: 16px;
    transition: background .2s ease;
}

.moledro-product-gallery .moledro-gallery-item:hover
.moledro-gallery-zoom {
    background: var(--mg-blue);
}

.moledro-product-gallery .moledro-gallery-image-index {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 7px 10px;
    border: 1px solid var(--mg-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    color: var(--mg-dark);
    font-size: 11px;
    font-weight: 800;
}

/* IMAGE INFORMATION */

.moledro-product-gallery .moledro-gallery-info {
    padding: 19px 21px 21px;
}

.moledro-product-gallery .moledro-gallery-info h3 {
    margin: 0 0 7px;
    color: var(--mg-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

.moledro-product-gallery .moledro-gallery-info p {
    margin: 0;
    color: var(--mg-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* LIGHTBOX */

body.product-lightbox-open {
    overflow: hidden;
}

.moledro-product-gallery .moledro-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 70px 90px;
    background: rgba(12, 15, 20, .96);
    backdrop-filter: blur(12px);
}

.moledro-product-gallery .moledro-gallery-lightbox.is-open {
    display: flex;
}

.moledro-product-gallery .moledro-gallery-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    max-height: 100%;
    min-width: 0;
}

.moledro-product-gallery .moledro-gallery-lightbox-content > img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 220px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}

/* LIGHTBOX CAPTION */

.moledro-product-gallery .moledro-gallery-lightbox-caption {
    max-width: 650px;
    color: #fff;
    text-align: center;
}

.moledro-product-gallery .moledro-gallery-lightbox-caption[hidden] {
    display: none !important;
}

.moledro-product-gallery .moledro-gallery-lightbox-caption h3 {
    margin: 0 0 7px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.moledro-product-gallery .moledro-gallery-lightbox-caption p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
}

/* LIGHTBOX CONTROLS */

.moledro-product-gallery .moledro-gallery-lightbox-close {
    position: absolute;
    top: 23px;
    right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.moledro-product-gallery .moledro-gallery-lightbox-close:hover {
    background: var(--mg-blue);
}

.moledro-product-gallery .moledro-gallery-lightbox-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 21px;
    cursor: pointer;
    transform: translateY(-50%);
}

.moledro-product-gallery .moledro-gallery-lightbox-arrow:hover {
    background: var(--mg-blue);
}

.moledro-product-gallery .moledro-gallery-lightbox-prev {
    left: 25px;
}

.moledro-product-gallery .moledro-gallery-lightbox-next {
    right: 25px;
}

.moledro-product-gallery .moledro-gallery-lightbox-counter {
    position: absolute;
    right: 25px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 700;
}

.moledro-product-gallery .moledro-gallery-lightbox-counter
[data-product-gallery-current] {
    color: var(--mg-blue);
}

/* FOCUS */

.moledro-product-gallery button:focus-visible {
    outline: 3px solid var(--mg-blue);
    outline-offset: 3px;
}

/* TABLET */

@media (max-width: 991.98px) {

    .moledro-product-gallery .moledro-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox {
        padding: 65px 65px;
    }
}

/* MOBILE */

@media (max-width: 767.98px) {

    .moledro-product-gallery .moledro-gallery-heading {
        margin-bottom: 23px;
    }

    .moledro-product-gallery .moledro-gallery-heading h2 {
        font-size: 28px;
    }

    .moledro-product-gallery .moledro-gallery-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-gallery .moledro-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .moledro-product-gallery .moledro-gallery-image {
        aspect-ratio: 1 / 1;
    }

    .moledro-product-gallery .moledro-gallery-image img {
        padding: 8px;
    }

    .moledro-product-gallery .moledro-gallery-info {
        padding: 13px;
    }

    .moledro-product-gallery .moledro-gallery-info h3 {
        font-size: 13px;
    }

    .moledro-product-gallery .moledro-gallery-info p {
        font-size: 11px;
    }

    .moledro-product-gallery .moledro-gallery-zoom {
        right: 9px;
        bottom: 9px;
        width: 31px;
        height: 31px;
        font-size: 13px;
    }

    .moledro-product-gallery .moledro-gallery-image-index {
        top: 9px;
        left: 9px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox {
        padding: 75px 15px 85px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-content > img {
        max-height: calc(100dvh - 240px);
    }

    .moledro-product-gallery .moledro-gallery-lightbox-close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-arrow {
        top: auto;
        bottom: 18px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-prev {
        left: 16px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-next {
        right: 16px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-counter {
        right: 50%;
        bottom: 31px;
        transform: translateX(50%);
    }

    .moledro-product-gallery .moledro-gallery-lightbox-caption h3 {
        font-size: 15px;
    }

    .moledro-product-gallery .moledro-gallery-lightbox-caption p {
        font-size: 12px;
    }
}

/* SMALL MOBILE */

@media (max-width: 399.98px) {

    .moledro-product-gallery .moledro-gallery-grid {
        gap: 9px;
    }

    .moledro-product-gallery .moledro-gallery-info {
        padding: 11px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-gallery .moledro-gallery-item,
    .moledro-product-gallery .moledro-gallery-image img {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT DETAIL HERO | FINAL CSS
============================================================ */

.moledro-product-hero {
    --mh-blue: #4db4dc;
    --mh-pink: #d52c83;
    --mh-yellow: #e8c51d;
    --mh-dark: #17191d;

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 345px;
    margin: 0;
    padding: 62px 0 70px;
    overflow: hidden;
    isolation: isolate;
    background: #17191d;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   BANNER IMAGE
============================================================ */

.moledro-product-hero.moledro-product-hero-has-image {
    background-image: var(--moledro-hero-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================================
   OVERLAY
============================================================ */

.moledro-product-hero .moledro-product-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
            90deg,
            rgba(13, 16, 21, .94) 0%,
            rgba(13, 16, 21, .84) 46%,
            rgba(13, 16, 21, .58) 100%
    );
}

/* ============================================================
   DECORATION
============================================================ */

.moledro-product-hero .moledro-product-hero-decoration {
    position: absolute;
    right: -150px;
    bottom: -260px;
    z-index: -1;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.moledro-product-hero .moledro-product-hero-decoration::before,
.moledro-product-hero .moledro-product-hero-decoration::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.moledro-product-hero .moledro-product-hero-decoration::before {
    inset: 65px;
}

.moledro-product-hero .moledro-product-hero-decoration::after {
    inset: 135px;
}

/* ============================================================
   CONTAINER
============================================================ */

.moledro-product-hero .moledro-product-hero-container {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1320px);
    margin: 0 auto;
}

.moledro-product-hero .moledro-product-hero-inner {
    width: 100%;
    max-width: 1050px;
}

/* ============================================================
   BREADCRUMB
============================================================ */

.moledro-product-hero .moledro-product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 38px;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, .57);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
}

.moledro-product-hero .moledro-product-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease;
}

.moledro-product-hero .moledro-product-breadcrumb a:hover {
    color: var(--mh-blue);
}

.moledro-product-hero .moledro-product-breadcrumb a i {
    font-size: 14px;
}

.moledro-product-hero .product-hero-breadcrumb-separator {
    color: rgba(255, 255, 255, .25);
}

.moledro-product-hero .moledro-product-breadcrumb-current {
    color: #fff;
    font-weight: 700;
}

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

.moledro-product-hero .moledro-product-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0;
    padding: 0;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-product-hero .moledro-product-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
    color: var(--mh-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.5;
    text-transform: uppercase;
}

.moledro-product-hero .moledro-product-hero-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 29px;
    height: 2px;
    background: var(--mh-blue);
}

/* ============================================================
   TITLE
============================================================ */

.moledro-product-hero .moledro-product-hero-content h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -2px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-product-hero .moledro-product-hero-content p {
    max-width: 720px;
    margin: 21px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
}

/* ============================================================
   BRAND ACCENT
============================================================ */

.moledro-product-hero .moledro-product-hero-accent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 29px;
}

.moledro-product-hero .moledro-product-hero-accent span {
    display: block;
    height: 3px;
    border-radius: 3px;
}

.moledro-product-hero .moledro-product-hero-accent span:nth-child(1) {
    width: 32px;
    background: var(--mh-blue);
}

.moledro-product-hero .moledro-product-hero-accent span:nth-child(2) {
    width: 17px;
    background: var(--mh-pink);
}

.moledro-product-hero .moledro-product-hero-accent span:nth-child(3) {
    width: 10px;
    background: var(--mh-yellow);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-hero {
        min-height: 310px;
        padding: 53px 0 60px;
    }

    .moledro-product-hero .moledro-product-hero-content h1 {
        font-size: clamp(34px, 5vw, 49px);
        letter-spacing: -1.5px;
    }

    .moledro-product-hero .moledro-product-breadcrumb {
        margin-bottom: 30px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-hero {
        min-height: 280px;
        padding: 42px 0 49px;
    }

    .moledro-product-hero .moledro-product-hero-container {
        width: min(100% - 34px, 1320px);
    }

    .moledro-product-hero .moledro-product-breadcrumb {
        gap: 7px;
        margin-bottom: 29px;
        font-size: 11px;
    }

    .moledro-product-hero .moledro-product-hero-kicker {
        gap: 9px;
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .moledro-product-hero .moledro-product-hero-kicker-line {
        width: 22px;
    }

    .moledro-product-hero .moledro-product-hero-content h1 {
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.18;
        letter-spacing: -1px;
    }

    .moledro-product-hero .moledro-product-hero-content p {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.8;
    }

    .moledro-product-hero .moledro-product-hero-accent {
        margin-top: 23px;
    }

    .moledro-product-hero .moledro-product-hero-decoration {
        right: -260px;
        bottom: -290px;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-hero .moledro-product-hero-container {
        width: calc(100% - 28px);
    }

    .moledro-product-hero .moledro-product-hero-content h1 {
        font-size: 29px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-hero .moledro-product-breadcrumb a {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   RELATED PRODUCTS | FINAL CSS
============================================================ */

.moledro-product-related {
    --mr-blue: #4db4dc;
    --mr-pink: #d52c83;
    --mr-yellow: #e8c51d;
    --mr-dark: #17191d;
    --mr-text: #4d5562;
    --mr-muted: #747d89;
    --mr-border: #e8eaee;
    --mr-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-related .moledro-related-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-related .moledro-related-heading-content {
    min-width: 0;
}

.moledro-product-related .moledro-related-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mr-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-related .moledro-related-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mr-blue);
}

.moledro-product-related .moledro-related-heading h2 {
    margin: 0;
    color: var(--mr-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-related .moledro-related-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mr-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mr-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   GRID
============================================================ */

.moledro-product-related .moledro-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

/* ============================================================
   PRODUCT CARD
============================================================ */

.moledro-product-related .moledro-related-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-product-related .moledro-related-card:hover {
    border-color: #cfe7f1;
    box-shadow: 0 13px 30px rgba(23, 25, 29, .055);
    transform: translateY(-3px);
}

/* ============================================================
   PRODUCT IMAGE
============================================================ */

.moledro-product-related .moledro-related-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--mr-light);
    text-decoration: none;
}

.moledro-product-related .moledro-related-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    object-fit: contain;
    transition: transform .3s ease;
}

.moledro-product-related .moledro-related-card:hover
.moledro-related-image img {
    transform: scale(1.05);
}

/* ============================================================
   NO IMAGE
============================================================ */

.moledro-product-related .moledro-related-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    color: #a0a8b2;
    font-size: 12px;
    font-weight: 600;
}

.moledro-product-related .moledro-related-no-image i {
    font-size: 36px;
}

/* ============================================================
   BADGES
============================================================ */

.moledro-product-related .moledro-related-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 70px);
}

.moledro-product-related .moledro-related-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 5px 9px;
    border-radius: 5px;
    background: var(--mr-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

.moledro-product-related .moledro-related-badge.is-new {
    background: var(--mr-blue);
}

.moledro-product-related .moledro-related-badge.is-featured {
    background: var(--mr-dark);
}

.moledro-product-related .moledro-related-badge.is-discount {
    background: var(--mr-pink);
}

/* ============================================================
   IMAGE ARROW
============================================================ */

.moledro-product-related .moledro-related-image-arrow {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 8px;
    background: #fff;
    color: var(--mr-dark);
    font-size: 17px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
    transition:
            background .2s ease,
            color .2s ease;
}

.moledro-product-related .moledro-related-card:hover
.moledro-related-image-arrow {
    background: var(--mr-blue);
    color: #fff;
}

/* ============================================================
   PRODUCT CONTENT
============================================================ */

.moledro-product-related .moledro-related-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 23px;
}

/* CATEGORY */

.moledro-product-related .moledro-related-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: #278fb7;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.moledro-product-related .moledro-related-category > span {
    width: 17px;
    height: 2px;
    background: var(--mr-blue);
}

/* TITLE */

.moledro-product-related .moledro-related-content h3 {
    margin: 0;
    color: var(--mr-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.2px;
}

.moledro-product-related .moledro-related-content h3 a {
    color: inherit;
    text-decoration: none;
}

.moledro-product-related .moledro-related-content h3 a:hover {
    color: #278fb7;
}

/* SKU */

.moledro-product-related .moledro-related-sku {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
    color: var(--mr-muted);
    font-size: 11px;
    line-height: 1.6;
}

.moledro-product-related .moledro-related-sku strong {
    color: var(--mr-text);
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* DESCRIPTION */

.moledro-product-related .moledro-related-description {
    display: -webkit-box;
    margin: 13px 0 0;
    overflow: hidden;
    color: var(--mr-text);
    font-size: 12px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ============================================================
   PRICE AND STOCK
============================================================ */

.moledro-product-related .moledro-related-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
}

.moledro-product-related .moledro-related-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.moledro-product-related .moledro-related-old-price {
    color: #9ca4ae;
    font-size: 11px;
    font-weight: 500;
    text-decoration: line-through;
}

.moledro-product-related .moledro-related-price strong {
    color: var(--mr-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

/* STOCK */

.moledro-product-related .moledro-related-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.moledro-product-related .moledro-related-stock > span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.moledro-product-related .moledro-related-stock.is-in-stock {
    color: #16845b;
}

.moledro-product-related .moledro-related-stock.is-in-stock > span {
    background: #16845b;
}

.moledro-product-related .moledro-related-stock.is-out-of-stock {
    color: #c24c56;
}

.moledro-product-related .moledro-related-stock.is-out-of-stock > span {
    background: #c24c56;
}

/* ============================================================
   DETAIL BUTTON
============================================================ */

.moledro-product-related .moledro-related-detail-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 45px;
    margin-top: 19px;
    padding: 12px 15px;
    border: 1px solid var(--mr-dark);
    border-radius: 8px;
    background: var(--mr-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease;
}

.moledro-product-related .moledro-related-detail-button:hover {
    border-color: var(--mr-blue);
    background: var(--mr-blue);
    color: #fff;
}

.moledro-product-related .moledro-related-detail-button i {
    font-size: 16px;
    transition: transform .2s ease;
}

.moledro-product-related .moledro-related-detail-button:hover i {
    transform: translateX(3px);
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-product-related a:focus-visible {
    outline: 3px solid var(--mr-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-related .moledro-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .moledro-product-related .moledro-related-content {
        padding: 20px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .moledro-product-related .moledro-related-heading {
        margin-bottom: 23px;
    }

    .moledro-product-related .moledro-related-heading h2 {
        font-size: 27px;
    }

    .moledro-product-related .moledro-related-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-related .moledro-related-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .moledro-product-related .moledro-related-content {
        padding: 20px;
    }

    .moledro-product-related .moledro-related-image {
        aspect-ratio: 16 / 11;
    }

    .moledro-product-related .moledro-related-content h3 {
        font-size: 17px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-related .moledro-related-card,
    .moledro-product-related .moledro-related-image img,
    .moledro-product-related .moledro-related-image-arrow,
    .moledro-product-related .moledro-related-detail-button,
    .moledro-product-related .moledro-related-detail-button i {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT DETAIL SLIDER | FINAL CSS
============================================================ */

.moledro-product-slider {
    --ms-blue: #4db4dc;
    --ms-pink: #d52c83;
    --ms-yellow: #e8c51d;
    --ms-dark: #17191d;

    position: relative;
    width: 100%;
    min-width: 0;
    height: 490px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 13px;
    background: var(--ms-dark);
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SLIDER TRACK
============================================================ */

.moledro-product-slider .moledro-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ============================================================
   SLIDE
============================================================ */

.moledro-product-slider .moledro-product-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--ms-dark);
    transition:
            opacity .55s ease,
            visibility .55s ease;
}

.moledro-product-slider .moledro-product-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ============================================================
   BACKGROUND
============================================================ */

.moledro-product-slider .moledro-slide-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.moledro-product-slider .moledro-slide-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 6s ease;
}

.moledro-product-slider .moledro-product-slide.is-active
.moledro-slide-background img {
    transform: scale(1.045);
}

/* ============================================================
   OVERLAY
============================================================ */

.moledro-product-slider .moledro-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
            90deg,
            rgba(14, 17, 22, .94) 0%,
            rgba(14, 17, 22, .78) 45%,
            rgba(14, 17, 22, .22) 100%
    );
}

/* ============================================================
   CONTAINER
============================================================ */

.moledro-product-slider .moledro-slide-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 55px 75px;
}

/* ============================================================
   CONTENT
============================================================ */

.moledro-product-slider .moledro-slide-content {
    position: relative;
    max-width: 650px;
    margin: 0;
    padding: 0;
    color: #fff;
}

/* ============================================================
   KICKER
============================================================ */

.moledro-product-slider .moledro-slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--ms-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.moledro-product-slider .moledro-slide-kicker-line {
    display: block;
    width: 27px;
    height: 2px;
    background: var(--ms-blue);
}

/* ============================================================
   TITLE
============================================================ */

.moledro-product-slider .moledro-slide-content h2 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.5px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-product-slider .moledro-slide-description {
    max-width: 580px;
    margin-top: 19px;
    color: rgba(255, 255, 255, .77);
    font-size: 14px;
    line-height: 1.85;
}

.moledro-product-slider .moledro-slide-description p {
    margin: 0 0 12px;
    color: inherit;
}

.moledro-product-slider .moledro-slide-description p:last-child {
    margin-bottom: 0;
}

.moledro-product-slider .moledro-slide-description a {
    color: var(--ms-blue);
}

/* ============================================================
   BUTTON
============================================================ */

.moledro-product-slider .moledro-slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 47px;
    margin-top: 25px;
    padding: 12px 18px;
    border: 1px solid #fff;
    border-radius: 7px;
    background: #fff;
    color: var(--ms-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-slider .moledro-slide-button:hover {
    border-color: var(--ms-blue);
    background: var(--ms-blue);
    color: #fff;
}

.moledro-product-slider .moledro-slide-button i {
    font-size: 16px;
}

/* ============================================================
   DECORATION
============================================================ */

.moledro-product-slider .moledro-slide-decoration {
    position: absolute;
    right: -160px;
    bottom: -260px;
    z-index: 2;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    pointer-events: none;
}

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

.moledro-product-slider .moledro-slider-navigation {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.moledro-product-slider .moledro-slider-arrow {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transform: none;
    transition:
            background .2s ease,
            border-color .2s ease;
}

.moledro-product-slider .moledro-slider-arrow:hover {
    border-color: var(--ms-blue);
    background: var(--ms-blue);
}

/* ============================================================
   DOTS
============================================================ */

.moledro-product-slider .moledro-slider-dots {
    position: absolute;
    left: 75px;
    bottom: 42px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
}

.moledro-product-slider .moledro-slider-dot {
    display: block;
    width: 23px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition:
            width .2s ease,
            background .2s ease;
}

.moledro-product-slider .moledro-slider-dot.is-active {
    width: 40px;
    background: var(--ms-blue);
}

/* ============================================================
   COUNTER
============================================================ */

.moledro-product-slider .moledro-slider-counter {
    position: absolute;
    right: 135px;
    bottom: 36px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .55);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.moledro-product-slider .moledro-slider-counter
[data-product-slider-current] {
    color: #fff;
    font-weight: 800;
}

.moledro-product-slider .moledro-slider-counter-divider {
    color: var(--ms-blue);
}

/* ============================================================
   FOCUS
============================================================ */

.moledro-product-slider button:focus-visible,
.moledro-product-slider a:focus-visible {
    outline: 3px solid var(--ms-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-slider {
        height: 440px;
    }

    .moledro-product-slider .moledro-slide-container {
        padding: 45px 50px;
    }

    .moledro-product-slider .moledro-slider-dots {
        left: 50px;
    }

    .moledro-product-slider .moledro-slide-content h2 {
        font-size: 38px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-slider {
        height: 460px;
        border-radius: 10px;
    }

    .moledro-product-slider .moledro-slide-container {
        padding: 38px 25px 95px;
    }

    .moledro-product-slider .moledro-slide-content h2 {
        font-size: clamp(27px, 7vw, 36px);
        letter-spacing: -1px;
    }

    .moledro-product-slider .moledro-slide-description {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.8;
    }

    .moledro-product-slider .moledro-slide-button {
        min-height: 43px;
        margin-top: 20px;
        padding: 10px 14px;
    }

    .moledro-product-slider .moledro-slide-overlay {
        background: linear-gradient(
                90deg,
                rgba(14, 17, 22, .92),
                rgba(14, 17, 22, .5)
        );
    }

    .moledro-product-slider .moledro-slider-dots {
        left: 25px;
        bottom: 36px;
    }

    .moledro-product-slider .moledro-slider-navigation {
        right: 15px;
        bottom: 18px;
        gap: 6px;
    }

    .moledro-product-slider .moledro-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .moledro-product-slider .moledro-slider-counter {
        display: none;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-slider {
        height: 440px;
    }

    .moledro-product-slider .moledro-slide-container {
        padding: 30px 20px 90px;
    }

    .moledro-product-slider .moledro-slide-content h2 {
        font-size: 27px;
    }

    .moledro-product-slider .moledro-slider-dots {
        left: 20px;
    }

    .moledro-product-slider .moledro-slider-dot {
        width: 16px;
    }

    .moledro-product-slider .moledro-slider-dot.is-active {
        width: 27px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-slider .moledro-product-slide,
    .moledro-product-slider .moledro-slide-background img,
    .moledro-product-slider .moledro-slider-arrow,
    .moledro-product-slider .moledro-slider-dot {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT SUMMARY | FINAL CSS
============================================================ */

.moledro-product-summary {
    --mp-blue: #4db4dc;
    --mp-pink: #d52c83;
    --mp-dark: #17191d;
    --mp-text: #4d5562;
    --mp-muted: #747d89;
    --mp-border: #e8eaee;
    --mp-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* CONTAINER */

.moledro-product-summary .moledro-summary-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* GRID */

.moledro-product-summary .moledro-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    width: 100%;
}

/* GALLERY */

.moledro-product-summary .moledro-summary-gallery {
    min-width: 0;
}

.moledro-product-summary .moledro-summary-main-image {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 13px;
    background: var(--mp-light);
}

.moledro-product-summary .moledro-summary-image-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 25px;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.moledro-product-summary .moledro-summary-image-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.moledro-product-summary .moledro-summary-image-button:hover img {
    transform: scale(1.035);
}

/* IMAGE BADGES */

.moledro-product-summary .moledro-summary-image-badges {
    position: absolute;
    top: 17px;
    left: 17px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    pointer-events: none;
}

.moledro-product-summary .product-summary-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.moledro-product-summary .product-summary-badge-new {
    background: var(--mp-blue);
}

.moledro-product-summary .product-summary-badge-discount {
    background: var(--mp-pink);
}

/* ZOOM */

.moledro-product-summary .moledro-summary-image-zoom {
    position: absolute;
    right: 17px;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--mp-dark);
    color: #fff;
    font-size: 17px;
    transition: background .2s ease;
}

.moledro-product-summary .moledro-summary-image-button:hover
.moledro-summary-image-zoom {
    background: var(--mp-blue);
}

/* THUMBNAILS */

.moledro-product-summary .moledro-summary-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.moledro-product-summary .moledro-summary-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease;
}

.moledro-product-summary .moledro-summary-thumbnail:hover,
.moledro-product-summary .moledro-summary-thumbnail.is-active {
    border-color: var(--mp-blue);
}

.moledro-product-summary .moledro-summary-thumbnail.is-active {
    box-shadow: 0 0 0 2px rgba(77, 180, 220, .12);
}

.moledro-product-summary .moledro-summary-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* NO IMAGE */

.moledro-product-summary .moledro-summary-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 400px;
    border: 1px solid var(--mp-border);
    border-radius: 13px;
    background: var(--mp-light);
    color: var(--mp-muted);
    font-size: 13px;
}

.moledro-product-summary .moledro-summary-no-image i {
    font-size: 42px;
    color: #b6bec7;
}

/* PRODUCT INFORMATION */

.moledro-product-summary .moledro-summary-info {
    min-width: 0;
}

.moledro-product-summary .moledro-summary-top {
    margin-bottom: 13px;
}

.moledro-product-summary .moledro-summary-category {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #278fb7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.moledro-product-summary .moledro-summary-category > span {
    width: 24px;
    height: 2px;
    background: var(--mp-blue);
}

.moledro-product-summary .moledro-summary-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.moledro-product-summary .moledro-summary-flag {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    background: var(--mp-light);
    color: var(--mp-text);
    font-size: 10px;
    font-weight: 700;
}

/* TITLE */

.moledro-product-summary .moledro-summary-title {
    margin: 0 0 19px;
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
}

/* CODES */

.moledro-product-summary .moledro-summary-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 23px;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--mp-border);
}

.moledro-product-summary .moledro-summary-code {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.moledro-product-summary .moledro-summary-code span {
    color: var(--mp-muted);
    font-size: 11px;
}

.moledro-product-summary .moledro-summary-code strong {
    color: var(--mp-dark);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* PRICE */

.moledro-product-summary .moledro-summary-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px 13px;
    margin-bottom: 22px;
}

.moledro-product-summary .moledro-summary-old-price {
    color: #a0a8b2;
    font-size: 14px;
    text-decoration: line-through;
}

.moledro-product-summary .moledro-summary-current-price {
    color: var(--mp-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.2;
}

.moledro-product-summary .moledro-summary-tax {
    color: var(--mp-muted);
    font-size: 11px;
}

/* DESCRIPTION */

.moledro-product-summary .moledro-summary-description {
    margin: 0 0 22px;
    color: var(--mp-text);
    font-size: 13px;
    line-height: 1.9;
}

/* STOCK */

.moledro-product-summary .moledro-summary-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 9px 12px;
    border: 1px solid var(--mp-border);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.moledro-product-summary .moledro-summary-stock.is-in-stock {
    color: #16845b;
    background: #f0faf5;
}

.moledro-product-summary .moledro-summary-stock.is-out-of-stock {
    color: #c24c56;
    background: #fff4f5;
}

.moledro-product-summary .moledro-summary-stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* SPECS */

.moledro-product-summary .moledro-summary-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.moledro-product-summary .moledro-summary-spec {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    background: #fff;
}

.moledro-product-summary .moledro-summary-spec span {
    color: var(--mp-muted);
    font-size: 11px;
}

.moledro-product-summary .moledro-summary-spec strong {
    color: var(--mp-dark);
    font-size: 13px;
    font-weight: 800;
}

/* CATEGORIES */

.moledro-product-summary .moledro-summary-categories {
    margin-bottom: 23px;
}

.moledro-product-summary .moledro-summary-label {
    display: block;
    margin-bottom: 11px;
    color: var(--mp-dark);
    font-size: 12px;
    font-weight: 800;
}

.moledro-product-summary .moledro-summary-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.moledro-product-summary .moledro-summary-category-list span {
    padding: 7px 11px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    background: var(--mp-light);
    color: var(--mp-text);
    font-size: 11px;
    font-weight: 600;
}

/* PURCHASE */

.moledro-product-summary .moledro-summary-purchase {
    margin-top: 25px;
    padding-top: 24px;
    border-top: 1px solid var(--mp-border);
}

.moledro-product-summary .moledro-summary-purchase-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 11px;
}

.moledro-product-summary .moledro-summary-quote-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 47px;
    padding: 12px 17px;
    border: 1px solid var(--mp-dark);
    border-radius: 8px;
    background: var(--mp-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.moledro-product-summary .moledro-summary-quote-button:hover {
    border-color: var(--mp-blue);
    background: var(--mp-blue);
    color: #fff;
}

.moledro-product-summary .moledro-summary-cart-form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.moledro-product-summary .moledro-summary-quantity {
    width: 78px;
    min-height: 47px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.moledro-product-summary .moledro-summary-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 47px;
    padding: 12px 16px;
    border: 1px solid var(--mp-blue);
    border-radius: 8px;
    background: var(--mp-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.moledro-product-summary .moledro-summary-cart-button:hover {
    border-color: var(--mp-dark);
    background: var(--mp-dark);
    color: #fff;
}

/* VARIANT NOTICE */

.moledro-product-summary .moledro-summary-variant-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #d9edf5;
    border-radius: 9px;
    background: #f3fafe;
}

.moledro-product-summary .moledro-summary-variant-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 8px;
    background: #e0f3fa;
    color: #238fb9;
    font-size: 17px;
}

.moledro-product-summary .moledro-summary-variant-text {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--mp-text);
    font-size: 12px;
}

.moledro-product-summary .moledro-summary-variant-text strong {
    color: var(--mp-dark);
    font-weight: 800;
}

.moledro-product-summary .moledro-summary-variant-notice a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #238fb9;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.moledro-product-summary .moledro-summary-variant-notice a:hover {
    color: var(--mp-dark);
}

/* LIGHTBOX */

body.product-lightbox-open {
    overflow: hidden;
}

.moledro-summary-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 65px;
    background: rgba(12, 15, 20, .96);
    backdrop-filter: blur(12px);
}

.moledro-summary-lightbox.is-open {
    display: flex;
}

.moledro-summary-lightbox > img {
    display: block;
    max-width: 100%;
    max-height: 90dvh;
    object-fit: contain;
}

.moledro-summary-lightbox .moledro-summary-lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.moledro-summary-lightbox .moledro-summary-lightbox-close:hover {
    background: var(--mp-blue, #4db4dc);
}

/* FOCUS */

.moledro-product-summary button:focus-visible,
.moledro-product-summary a:focus-visible,
.moledro-summary-lightbox button:focus-visible {
    outline: 3px solid #4db4dc;
    outline-offset: 3px;
}

/* TABLET */

@media (max-width: 991.98px) {

    .moledro-product-summary .moledro-summary-grid {
        gap: 28px;
    }

    .moledro-product-summary .moledro-summary-title {
        font-size: 29px;
    }

    .moledro-product-summary .moledro-summary-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 767.98px) {

    .moledro-product-summary .moledro-summary-grid {
        grid-template-columns: 1fr;
        gap: 29px;
    }

    .moledro-product-summary .moledro-summary-image-button {
        aspect-ratio: 1 / 1;
        padding: 18px;
    }

    .moledro-product-summary .moledro-summary-thumbnails {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }

    .moledro-product-summary .moledro-summary-thumbnail {
        padding: 5px;
    }

    .moledro-product-summary .moledro-summary-title {
        font-size: 28px;
    }

    .moledro-product-summary .moledro-summary-current-price {
        font-size: 30px;
    }

    .moledro-product-summary .moledro-summary-purchase-actions {
        flex-direction: column;
    }

    .moledro-product-summary .moledro-summary-quote-button {
        width: 100%;
    }

    .moledro-product-summary .moledro-summary-cart-form {
        width: 100%;
    }

    .moledro-product-summary .moledro-summary-cart-button {
        flex: 1;
    }

    .moledro-summary-lightbox {
        padding: 65px 15px;
    }

    .moledro-summary-lightbox .moledro-summary-lightbox-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}

/* SMALL MOBILE */

@media (max-width: 399.98px) {

    .moledro-product-summary .moledro-summary-specs {
        gap: 8px;
    }

    .moledro-product-summary .moledro-summary-spec {
        padding: 11px;
    }

    .moledro-product-summary .moledro-summary-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-summary .moledro-summary-image-button img,
    .moledro-product-summary .moledro-summary-thumbnail {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT DETAIL TABS | FINAL CSS
============================================================ */

.moledro-product-tabs {
    --mt-blue: #4db4dc;
    --mt-pink: #d52c83;
    --mt-dark: #17191d;
    --mt-text: #4d5562;
    --mt-muted: #747d89;
    --mt-border: #e8eaee;
    --mt-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-tabs .moledro-tabs-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-tabs .moledro-tabs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mt-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-tabs .moledro-tabs-kicker-line {
    display: block;
    width: 27px;
    height: 2px;
    background: var(--mt-blue);
}

.moledro-product-tabs .moledro-tabs-heading h2 {
    margin: 0;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-tabs .moledro-tabs-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mt-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   TABS LAYOUT
============================================================ */

.moledro-product-tabs .moledro-tabs-layout {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    width: 100%;
}

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

.moledro-product-tabs .moledro-tabs-sidebar {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--mt-border);
    border-radius: 11px;
    background: var(--mt-light);
}

.moledro-product-tabs .moledro-tabs-sidebar-label {
    margin: 0 0 15px;
    padding: 0 5px;
    color: var(--mt-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

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

.moledro-product-tabs .moledro-tabs-navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.moledro-product-tabs .moledro-tab-button {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 56px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mt-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
}

.moledro-product-tabs .moledro-tab-button:hover {
    background: #fff;
    color: var(--mt-dark);
}

.moledro-product-tabs .moledro-tab-button.is-active {
    border-color: #d8edf6;
    background: #fff;
    color: var(--mt-dark);
    box-shadow: 0 3px 12px rgba(23, 25, 29, .035);
}

/* NUMBER */

.moledro-product-tabs .moledro-tab-button-number {
    flex-shrink: 0;
    color: #a4acb6;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.moledro-product-tabs .moledro-tab-button.is-active
.moledro-tab-button-number {
    color: var(--mt-blue);
}

/* TEXT */

.moledro-product-tabs .moledro-tab-button-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ARROW */

.moledro-product-tabs .moledro-tab-button-arrow {
    flex-shrink: 0;
    color: #a4acb6;
    font-size: 15px;
    transition: transform .2s ease;
}

.moledro-product-tabs .moledro-tab-button.is-active
.moledro-tab-button-arrow {
    color: var(--mt-blue);
    transform: translateX(3px);
}

/* ============================================================
   PANELS
============================================================ */

.moledro-product-tabs .moledro-tabs-panels {
    min-width: 0;
    border: 1px solid var(--mt-border);
    border-radius: 11px;
    background: #fff;
}

.moledro-product-tabs .moledro-tab-panel {
    min-width: 0;
    padding: 32px;
}

.moledro-product-tabs .moledro-tab-panel[hidden] {
    display: none !important;
}

/* ============================================================
   PANEL HEADING
============================================================ */

.moledro-product-tabs .moledro-tab-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--mt-border);
}

.moledro-product-tabs .moledro-tab-panel-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--mt-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.moledro-product-tabs .moledro-tab-panel-heading h3 {
    margin: 0;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
}

.moledro-product-tabs .moledro-tab-panel-index {
    flex-shrink: 0;
    color: #e4e8ed;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   SINGLE TAB
============================================================ */

.moledro-product-tabs .moledro-tab-single {
    padding: 30px 32px;
    border: 1px solid var(--mt-border);
    border-radius: 11px;
    background: #fff;
}

.moledro-product-tabs .moledro-tab-single-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mt-border);
}

.moledro-product-tabs .moledro-tab-single-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    border: 1px solid #d8edf6;
    border-radius: 8px;
    background: #f0f9fd;
    color: var(--mt-blue);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.moledro-product-tabs .moledro-tab-single-heading h3 {
    margin: 0;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
}

/* ============================================================
   RICH TEXT CONTENT
============================================================ */

.moledro-product-tabs .moledro-tab-content {
    min-width: 0;
    color: var(--mt-text);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.moledro-product-tabs .moledro-tab-content > :first-child {
    margin-top: 0;
}

.moledro-product-tabs .moledro-tab-content > :last-child {
    margin-bottom: 0;
}

.moledro-product-tabs .moledro-tab-content p {
    margin: 0 0 15px;
    color: inherit;
    line-height: inherit;
}

.moledro-product-tabs .moledro-tab-content h2,
.moledro-product-tabs .moledro-tab-content h3,
.moledro-product-tabs .moledro-tab-content h4,
.moledro-product-tabs .moledro-tab-content h5 {
    margin: 24px 0 12px;
    color: var(--mt-dark);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    line-height: 1.4;
}

.moledro-product-tabs .moledro-tab-content h2 {
    font-size: 22px;
}

.moledro-product-tabs .moledro-tab-content h3 {
    font-size: 19px;
}

.moledro-product-tabs .moledro-tab-content h4,
.moledro-product-tabs .moledro-tab-content h5 {
    font-size: 15px;
}

.moledro-product-tabs .moledro-tab-content ul,
.moledro-product-tabs .moledro-tab-content ol {
    margin: 0 0 17px;
    padding-left: 22px;
}

.moledro-product-tabs .moledro-tab-content li {
    margin-bottom: 7px;
}

.moledro-product-tabs .moledro-tab-content li::marker {
    color: var(--mt-blue);
}

.moledro-product-tabs .moledro-tab-content a {
    color: #258fb9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-product-tabs .moledro-tab-content a:hover {
    color: var(--mt-dark);
}

.moledro-product-tabs .moledro-tab-content strong,
.moledro-product-tabs .moledro-tab-content b {
    color: var(--mt-dark);
    font-weight: 800;
}

/* IMAGES */

.moledro-product-tabs .moledro-tab-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.moledro-product-tabs .moledro-tab-content figure {
    max-width: 100%;
    margin: 20px 0;
}

.moledro-product-tabs .moledro-tab-content figcaption {
    margin-top: 9px;
    color: var(--mt-muted);
    font-size: 11px;
}

/* TABLES */

.moledro-product-tabs .moledro-tab-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    overflow-x: auto;
    border-collapse: collapse;
}

.moledro-product-tabs .moledro-tab-content th,
.moledro-product-tabs .moledro-tab-content td {
    padding: 12px 14px;
    border: 1px solid var(--mt-border);
    text-align: left;
    vertical-align: top;
}

.moledro-product-tabs .moledro-tab-content th {
    background: var(--mt-light);
    color: var(--mt-dark);
    font-weight: 800;
}

/* BLOCKQUOTE */

.moledro-product-tabs .moledro-tab-content blockquote {
    margin: 20px 0;
    padding: 17px 20px;
    border-left: 3px solid var(--mt-blue);
    border-radius: 0 7px 7px 0;
    background: var(--mt-light);
    color: var(--mt-text);
}

/* EMBEDS */

.moledro-product-tabs .moledro-tab-content iframe,
.moledro-product-tabs .moledro-tab-content video {
    max-width: 100%;
    border-radius: 8px;
}

/* ============================================================
   ACCESSIBILITY
============================================================ */

.moledro-product-tabs .moledro-tab-button:focus-visible,
.moledro-product-tabs .moledro-tab-panel:focus-visible {
    outline: 3px solid var(--mt-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-tabs .moledro-tabs-layout {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        gap: 15px;
    }

    .moledro-product-tabs .moledro-tabs-sidebar {
        padding: 12px;
    }

    .moledro-product-tabs .moledro-tab-panel {
        padding: 25px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-tabs .moledro-tabs-heading {
        margin-bottom: 23px;
    }

    .moledro-product-tabs .moledro-tabs-heading h2 {
        font-size: 27px;
    }

    .moledro-product-tabs .moledro-tabs-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-tabs .moledro-tabs-layout {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .moledro-product-tabs .moledro-tabs-sidebar {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .moledro-product-tabs .moledro-tabs-sidebar-label {
        display: none;
    }

    .moledro-product-tabs .moledro-tabs-navigation {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 9px;
        scrollbar-width: thin;
        scrollbar-color: #cbd5dd transparent;
        scroll-snap-type: x proximity;
    }

    .moledro-product-tabs .moledro-tab-button {
        flex: 0 0 auto;
        width: auto;
        min-height: 46px;
        padding: 10px 14px;
        border: 1px solid var(--mt-border);
        border-radius: 7px;
        background: #fff;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .moledro-product-tabs .moledro-tab-button.is-active {
        border-color: var(--mt-blue);
        background: #f0f9fd;
    }

    .moledro-product-tabs .moledro-tab-button-arrow {
        display: none;
    }

    .moledro-product-tabs .moledro-tab-panel {
        padding: 23px 19px;
    }

    .moledro-product-tabs .moledro-tab-panel-heading {
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    .moledro-product-tabs .moledro-tab-panel-heading h3 {
        font-size: 21px;
    }

    .moledro-product-tabs .moledro-tab-panel-index {
        font-size: 30px;
    }

    .moledro-product-tabs .moledro-tab-single {
        padding: 23px 19px;
    }

    .moledro-product-tabs .moledro-tab-content {
        font-size: 12px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-tabs .moledro-tab-button,
    .moledro-product-tabs .moledro-tab-button-arrow {
        transition: none;
    }

    .moledro-product-tabs .moledro-tabs-navigation {
        scroll-behavior: auto;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT TECHNICAL FEATURES | FINAL CSS
============================================================ */

.moledro-product-technical {
    --mtech-blue: #4db4dc;
    --mtech-dark: #17191d;
    --mtech-text: #4d5562;
    --mtech-muted: #747d89;
    --mtech-border: #e8eaee;
    --mtech-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-technical .moledro-technical-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-technical .moledro-technical-heading-content {
    min-width: 0;
}

.moledro-product-technical .moledro-technical-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mtech-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-technical .moledro-technical-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mtech-blue);
}

.moledro-product-technical .moledro-technical-heading h2 {
    margin: 0;
    color: var(--mtech-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-technical .moledro-technical-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mtech-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mtech-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   TABLE WRAPPER
============================================================ */

.moledro-product-technical .moledro-technical-table {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mtech-border);
    border-radius: 12px;
    background: #fff;
}

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

.moledro-product-technical .moledro-technical-table-header {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    align-items: center;
    min-height: 49px;
    padding: 0 25px;
    border-bottom: 1px solid var(--mtech-border);
    background: var(--mtech-light);
}

.moledro-product-technical .moledro-technical-table-header span {
    color: var(--mtech-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1px;
}

/* ============================================================
   TECHNICAL ROW
============================================================ */

.moledro-product-technical .moledro-technical-row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    align-items: stretch;
    min-width: 0;
    border-bottom: 1px solid var(--mtech-border);
    background: #fff;
    transition: background .2s ease;
}

.moledro-product-technical .moledro-technical-row:last-child {
    border-bottom: 0;
}

.moledro-product-technical .moledro-technical-row:hover {
    background: #fbfdfe;
}

/* ============================================================
   FEATURE LABEL
============================================================ */

.moledro-product-technical .moledro-technical-label {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    padding: 20px 24px;
    border-right: 1px solid var(--mtech-border);
}

/* NUMBER */

.moledro-product-technical .moledro-technical-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 31px;
    height: 31px;
    padding: 0 6px;
    border: 1px solid #d9edf5;
    border-radius: 7px;
    background: #f1f9fd;
    color: #278fb7;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* TITLE */

.moledro-product-technical .moledro-technical-title {
    min-width: 0;
    padding-top: 5px;
    color: var(--mtech-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ============================================================
   FEATURE VALUE
============================================================ */

.moledro-product-technical .moledro-technical-value {
    display: block;
    min-width: 0;
    padding: 24px 26px;
    color: var(--mtech-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.moledro-product-technical .moledro-technical-empty {
    color: #a2aab4;
    font-size: 12px;
    font-style: italic;
}

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

.moledro-product-technical .moledro-technical-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: var(--mtech-muted);
    font-size: 11px;
    line-height: 1.7;
}

.moledro-product-technical .moledro-technical-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    background: #edf8fc;
    color: #278fb7;
    font-size: 13px;
}

.moledro-product-technical .moledro-technical-footer strong {
    color: var(--mtech-dark);
    font-weight: 800;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-technical .moledro-technical-table-header {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
        padding: 0 19px;
    }

    .moledro-product-technical .moledro-technical-row {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    }

    .moledro-product-technical .moledro-technical-label {
        gap: 10px;
        padding: 18px;
    }

    .moledro-product-technical .moledro-technical-value {
        padding: 20px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-technical .moledro-technical-heading {
        margin-bottom: 23px;
    }

    .moledro-product-technical .moledro-technical-heading h2 {
        font-size: 27px;
    }

    .moledro-product-technical .moledro-technical-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-technical .moledro-technical-table {
        border-radius: 10px;
    }

    .moledro-product-technical .moledro-technical-table-header {
        display: none;
    }

    .moledro-product-technical .moledro-technical-row {
        grid-template-columns: 1fr;
    }

    .moledro-product-technical .moledro-technical-label {
        align-items: center;
        gap: 11px;
        padding: 17px 17px 8px;
        border-right: 0;
    }

    .moledro-product-technical .moledro-technical-title {
        padding-top: 0;
        font-size: 12px;
    }

    .moledro-product-technical .moledro-technical-number {
        min-width: 28px;
        height: 28px;
    }

    .moledro-product-technical .moledro-technical-value {
        padding: 0 17px 18px 56px;
        font-size: 12px;
        line-height: 1.8;
    }

    .moledro-product-technical .moledro-technical-footer {
        align-items: flex-start;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-technical .moledro-technical-heading h2 {
        font-size: 25px;
    }

    .moledro-product-technical .moledro-technical-label {
        padding-left: 13px;
        padding-right: 13px;
    }

    .moledro-product-technical .moledro-technical-value {
        padding-left: 52px;
        padding-right: 13px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-technical .moledro-technical-row {
        transition: none;
    }
}

/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT VARIANTS | FINAL CSS
============================================================ */

.moledro-product-variants {
    --mv-blue: #4db4dc;
    --mv-dark: #17191d;
    --mv-text: #4d5562;
    --mv-muted: #747d89;
    --mv-border: #e8eaee;
    --mv-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    scroll-margin-top: 110px;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-variants .moledro-variants-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-variants .moledro-variants-heading-content {
    min-width: 0;
}

.moledro-product-variants .moledro-variants-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mv-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-variants .moledro-variants-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mv-blue);
}

.moledro-product-variants .moledro-variants-heading h2 {
    margin: 0;
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-variants .moledro-variants-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mv-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   TABLE WRAPPER
============================================================ */

.moledro-product-variants .moledro-variants-table-wrapper {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--mv-border);
    border-radius: 12px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5dd transparent;
}

/* ============================================================
   TABLE
============================================================ */

.moledro-product-variants .moledro-variants-table {
    width: 100%;
    min-width: 650px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--mv-text);
    font-size: 12px;
    text-align: left;
}

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

.moledro-product-variants .moledro-variants-table thead {
    background: var(--mv-light);
}

.moledro-product-variants .moledro-variants-table thead th {
    padding: 17px 19px;
    border: 0;
    border-bottom: 1px solid var(--mv-border);
    color: var(--mv-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.moledro-product-variants .moledro-variants-table thead th:first-child {
    padding-left: 24px;
}

.moledro-product-variants .moledro-variants-table thead th:last-child {
    padding-right: 24px;
}

/* ============================================================
   TABLE BODY
============================================================ */

.moledro-product-variants .moledro-variants-table tbody tr {
    background: #fff;
    transition: background .2s ease;
}

.moledro-product-variants .moledro-variants-table tbody tr:hover {
    background: #fafdff;
}

.moledro-product-variants .moledro-variants-table tbody td {
    padding: 20px 19px;
    border: 0;
    border-bottom: 1px solid var(--mv-border);
    vertical-align: middle;
}

.moledro-product-variants .moledro-variants-table tbody tr:last-child td {
    border-bottom: 0;
}

.moledro-product-variants .moledro-variants-table tbody td:first-child {
    padding-left: 24px;
}

.moledro-product-variants .moledro-variants-table tbody td:last-child {
    padding-right: 24px;
}

/* ============================================================
   VARIANT CODE
============================================================ */

.moledro-product-variants .moledro-variant-code-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.moledro-product-variants .moledro-variant-index {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #d9edf5;
    border-radius: 7px;
    background: #f1f9fd;
    color: #278fb7;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.moledro-product-variants .moledro-variant-code-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.moledro-product-variants .moledro-variant-code-details strong {
    color: var(--mv-dark);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.moledro-product-variants .moledro-variant-code-details small {
    color: var(--mv-muted);
    font-size: 10px;
    overflow-wrap: anywhere;
}

/* ============================================================
   OPTIONS
============================================================ */

.moledro-product-variants .moledro-variant-option strong {
    color: var(--mv-text);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.moledro-product-variants .product-variant-empty {
    color: #a9b0b9;
    font-size: 12px;
}

/* ============================================================
   PRICE
============================================================ */

.moledro-product-variants .moledro-variant-price {
    white-space: nowrap;
}

.moledro-product-variants .moledro-variant-old-price {
    display: block;
    margin-bottom: 5px;
    color: #9ca4ae;
    font-size: 11px;
    text-decoration: line-through;
}

.moledro-product-variants .moledro-variant-current-price {
    display: block;
    color: var(--mv-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   STOCK
============================================================ */

.moledro-product-variants .moledro-variant-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.moledro-product-variants .moledro-variant-stock-badge
.product-variant-stock-dot {
    display: block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* IN STOCK */

.moledro-product-variants .moledro-variant-stock-badge.is-in-stock {
    background: #eefaf3;
    color: #16845b;
}

/* ORDERABLE */

.moledro-product-variants .moledro-variant-stock-badge.is-orderable {
    background: #fff8e9;
    color: #a97816;
}

/* OUT OF STOCK */

.moledro-product-variants .moledro-variant-stock-badge.is-out-of-stock {
    background: #fff1f3;
    color: #c24c56;
}

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

.moledro-product-variants .moledro-variants-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 16px;
}

.moledro-product-variants .moledro-variants-footer-info {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--mv-muted);
    font-size: 11px;
    line-height: 1.7;
}

.moledro-product-variants .moledro-variants-footer-info i {
    color: #278fb7;
    font-size: 14px;
}

.moledro-product-variants .moledro-variants-footer-info strong {
    color: var(--mv-dark);
    font-weight: 800;
}

.moledro-product-variants .moledro-variants-footer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    color: var(--mv-muted);
    font-size: 11px;
    line-height: 1.7;
}

.moledro-product-variants .moledro-variants-footer-options strong {
    color: var(--mv-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-variants .moledro-variants-table thead th {
        padding: 15px;
    }

    .moledro-product-variants .moledro-variants-table tbody td {
        padding: 17px 15px;
    }
}

/* ============================================================
   MOBILE CARD VIEW
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-variants .moledro-variants-heading {
        margin-bottom: 23px;
    }

    .moledro-product-variants .moledro-variants-heading h2 {
        font-size: 27px;
    }

    .moledro-product-variants .moledro-variants-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-variants .moledro-variants-table-wrapper {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .moledro-product-variants .moledro-variants-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .moledro-product-variants .moledro-variants-table thead {
        display: none;
    }

    .moledro-product-variants .moledro-variants-table tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
        width: 100%;
    }

    .moledro-product-variants .moledro-variants-table tbody tr {
        display: block;
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--mv-border);
        border-radius: 10px;
        background: #fff;
    }

    .moledro-product-variants .moledro-variants-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 13px 17px;
        border-bottom: 1px solid var(--mv-border);
        text-align: right;
        white-space: normal;
    }

    .moledro-product-variants .moledro-variants-table tbody td:first-child {
        padding: 16px 17px;
        background: var(--mv-light);
    }

    .moledro-product-variants .moledro-variants-table tbody td:last-child {
        padding: 14px 17px;
        border-bottom: 0;
    }

    .moledro-product-variants .moledro-variants-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--mv-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.6;
        text-align: left;
    }

    .moledro-product-variants .moledro-variants-table tbody
    td.moledro-variant-code::before {
        display: none;
    }

    .moledro-product-variants .moledro-variant-code-inner {
        width: 100%;
        text-align: left;
    }

    .moledro-product-variants .moledro-variant-option strong {
        text-align: right;
    }

    .moledro-product-variants .moledro-variant-price {
        text-align: right;
    }

    .moledro-product-variants .moledro-variants-footer {
        flex-direction: column;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .moledro-product-variants .moledro-variants-table tbody td {
        padding-left: 13px;
        padding-right: 13px;
    }

    .moledro-product-variants .moledro-variants-table tbody td:first-child,
    .moledro-product-variants .moledro-variants-table tbody td:last-child {
        padding-left: 13px;
        padding-right: 13px;
    }

    .moledro-product-variants .moledro-variant-stock-badge {
        padding: 7px 9px;
        font-size: 10px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-variants .moledro-variants-table tbody tr {
        transition: none;
    }
}


/* ============================================================
   MOLEDRO DIGITAL AGENCY
   PRODUCT VIDEOS | FINAL CSS
============================================================ */

.moledro-product-videos {
    --mvideo-blue: #4db4dc;
    --mvideo-dark: #17191d;
    --mvideo-text: #4d5562;
    --mvideo-muted: #747d89;
    --mvideo-border: #e8eaee;
    --mvideo-light: #f7f8fa;

    width: 100%;
    min-width: 0;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   SECTION HEADING
============================================================ */

.moledro-product-videos .moledro-videos-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.moledro-product-videos .moledro-videos-heading-content {
    min-width: 0;
}

.moledro-product-videos .moledro-videos-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--mvideo-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.3px;
}

.moledro-product-videos .moledro-videos-kicker-line {
    display: block;
    flex-shrink: 0;
    width: 27px;
    height: 2px;
    background: var(--mvideo-blue);
}

.moledro-product-videos .moledro-videos-heading h2 {
    margin: 0;
    color: var(--mvideo-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
}

.moledro-product-videos .moledro-videos-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mvideo-border);
    border-radius: 9px;
    background: #fff;
    color: var(--mvideo-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================
   VIDEO GRID
============================================================ */

.moledro-product-videos .moledro-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    width: 100%;
}

/* ============================================================
   VIDEO CARD
============================================================ */

.moledro-product-videos .moledro-video-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mvideo-border);
    border-radius: 12px;
    background: #fff;
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.moledro-product-videos .moledro-video-card:hover {
    border-color: #d8e6ed;
    box-shadow: 0 12px 30px rgba(23, 25, 29, .055);
    transform: translateY(-2px);
}

/* ============================================================
   VIDEO MEDIA
============================================================ */

.moledro-product-videos .moledro-video-media {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111820;
}

/* RESPONSIVE VIDEO */

.moledro-product-videos .moledro-video-responsive {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.moledro-product-videos .moledro-video-responsive iframe,
.moledro-product-videos .moledro-video-responsive video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: #111820;
}

/* ============================================================
   SOURCE BADGE
============================================================ */

.moledro-product-videos .moledro-video-source {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 26px);
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(17, 24, 32, .82);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.moledro-product-videos .moledro-video-source i {
    color: #70c9eb;
    font-size: 13px;
}

/* ============================================================
   EXTERNAL VIDEO
============================================================ */

.moledro-product-videos .moledro-video-external {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.moledro-product-videos .moledro-video-external > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moledro-product-videos .moledro-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
            radial-gradient(
                    circle at 70% 30%,
                    rgba(77, 180, 220, .16),
                    transparent 48%
            ),
            #111820;
}

.moledro-product-videos .moledro-video-placeholder i {
    color: rgba(255, 255, 255, .35);
    font-size: 64px;
}

.moledro-product-videos .moledro-video-external-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 14, 20, .35);
    transition: background .2s ease;
}

.moledro-product-videos .moledro-video-external:hover
.moledro-video-external-overlay {
    background: rgba(9, 14, 20, .55);
}

.moledro-product-videos .moledro-video-external-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    background: #fff;
    color: var(--mvideo-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    transition:
            background .2s ease,
            color .2s ease;
}

.moledro-product-videos .moledro-video-external-button:hover {
    border-color: var(--mvideo-blue);
    background: var(--mvideo-blue);
    color: #fff;
}

/* ============================================================
   VIDEO INFO
============================================================ */

.moledro-product-videos .moledro-video-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 23px 24px 25px;
}

.moledro-product-videos .moledro-video-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.moledro-product-videos .moledro-video-index {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border: 1px solid #d9edf5;
    border-radius: 7px;
    background: #f1f9fd;
    color: #278fb7;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.moledro-product-videos .moledro-video-info-label {
    color: var(--mvideo-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
}

.moledro-product-videos .moledro-video-title {
    margin: 0;
    color: var(--mvideo-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.3px;
    overflow-wrap: anywhere;
}

/* ============================================================
   DESCRIPTION
============================================================ */

.moledro-product-videos .moledro-video-description {
    margin-top: 13px;
    color: var(--mvideo-text);
    font-size: 12px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.moledro-product-videos .moledro-video-description > :first-child {
    margin-top: 0;
}

.moledro-product-videos .moledro-video-description > :last-child {
    margin-bottom: 0;
}

.moledro-product-videos .moledro-video-description p {
    margin: 0 0 11px;
}

.moledro-product-videos .moledro-video-description a {
    color: #278fb7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.moledro-product-videos .moledro-video-description a:hover {
    color: var(--mvideo-dark);
}

.moledro-product-videos .moledro-video-description img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

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

.moledro-product-videos .moledro-videos-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 17px;
    color: var(--mvideo-muted);
    font-size: 11px;
    line-height: 1.7;
}

.moledro-product-videos .moledro-videos-footer i {
    color: #278fb7;
    font-size: 15px;
}

.moledro-product-videos .moledro-videos-footer strong {
    color: var(--mvideo-dark);
    font-weight: 800;
}

/* ============================================================
   ACCESSIBILITY
============================================================ */

.moledro-product-videos .moledro-video-external-button:focus-visible {
    outline: 3px solid var(--mvideo-blue);
    outline-offset: 3px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .moledro-product-videos .moledro-videos-grid {
        gap: 15px;
    }

    .moledro-product-videos .moledro-video-info {
        padding: 19px;
    }

    .moledro-product-videos .moledro-video-title {
        font-size: 16px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .moledro-product-videos .moledro-videos-heading {
        margin-bottom: 23px;
    }

    .moledro-product-videos .moledro-videos-heading h2 {
        font-size: 27px;
    }

    .moledro-product-videos .moledro-videos-count {
        min-width: 39px;
        height: 39px;
    }

    .moledro-product-videos .moledro-videos-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .moledro-product-videos .moledro-video-card {
        border-radius: 10px;
    }

    .moledro-product-videos .moledro-video-info {
        padding: 19px;
    }

    .moledro-product-videos .moledro-video-title {
        font-size: 17px;
    }

    .moledro-product-videos .moledro-video-source {
        top: 10px;
        left: 10px;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .moledro-product-videos .moledro-video-card,
    .moledro-product-videos .moledro-video-external-overlay,
    .moledro-product-videos .moledro-video-external-button {
        transition: none;
    }

    .moledro-product-videos .moledro-video-card:hover {
        transform: none;
    }
}


/* ============================================================
   MOLEDRO | SEARCH PAGE
============================================================ */

.moledro-search-page {
    --ms-dark: #17191d;
    --ms-text: #4d5562;
    --ms-muted: #7a8490;
    --ms-blue: #4db4dc;
    --ms-border: #e8eaee;

    padding: 75px 0 105px;
    background: #fff;
    font-family: 'Inter', sans-serif;
}

.moledro-search-page .site-content-container {
    max-width: 1120px;
    margin: 0 auto;
}

/* HEADING */

.moledro-search-heading {
    margin-bottom: 35px;
}

.moledro-search-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--ms-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.moledro-search-kicker span {
    width: 27px;
    height: 2px;
    background: var(--ms-blue);
}

.moledro-search-heading h1 {
    margin: 0 0 13px;
    color: var(--ms-dark);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.moledro-search-heading p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* SEARCH FORM */

.moledro-search-form {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding: 9px 10px 9px 25px;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.moledro-search-form:focus-within {
    border-color: var(--ms-blue);
    box-shadow: 0 0 0 4px rgba(77,180,220,.09);
}

.moledro-search-form > i {
    color: #8a949f;
    font-size: 21px;
}

.moledro-search-form input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ms-dark);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.moledro-search-form input::placeholder {
    color: #a0a8b2;
}

.moledro-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 122px;
    min-height: 54px;
    padding: 13px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--ms-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s;
}

.moledro-search-form button:hover {
    background: #258fb9;
}

/* SUMMARY */

.moledro-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 45px 0 26px;
}

.moledro-search-summary > div > span {
    display: block;
    margin-bottom: 8px;
    color: var(--ms-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.moledro-search-summary h2 {
    margin: 0;
    color: var(--ms-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 25px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.moledro-search-total {
    flex-shrink: 0;
    padding: 9px 13px;
    border: 1px solid var(--ms-border);
    border-radius: 7px;
    color: var(--ms-text);
    font-size: 12px;
    font-weight: 700;
}

/* GROUP */

.moledro-search-group {
    margin-top: 34px;
}

.moledro-search-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.moledro-search-group-heading h3 {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: var(--ms-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.moledro-search-group-heading h3 i {
    color: var(--ms-blue);
    font-size: 19px;
}

.moledro-search-group-heading > span {
    color: var(--ms-muted);
    font-size: 12px;
    font-weight: 700;
}

/* RESULTS */

.moledro-search-list {
    overflow: hidden;
    border: 1px solid var(--ms-border);
    border-radius: 11px;
}

.moledro-search-result {
    display: flex;
    align-items: center;
    gap: 19px;
    padding: 23px 25px;
    border-bottom: 1px solid var(--ms-border);
    color: inherit;
    text-decoration: none;
    transition: background .2s;
}

.moledro-search-result:last-child {
    border-bottom: 0;
}

.moledro-search-result:hover {
    background: #f9fcfe;
    text-decoration: none;
}

.moledro-search-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: 1px solid #dceef6;
    border-radius: 9px;
    background: #f0f9fd;
    color: #278fb7;
    font-size: 19px;
}

.moledro-search-result-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.moledro-search-result-body > strong {
    color: var(--ms-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.moledro-search-result-body > small {
    color: var(--ms-muted);
    font-size: 12px;
    line-height: 1.75;
}

.moledro-search-sku {
    color: #258fb9;
    font-size: 11px;
    font-weight: 700;
}

.moledro-search-result-arrow {
    flex-shrink: 0;
    color: #a0a8b2;
    font-size: 18px;
    transition: color .2s, transform .2s;
}

.moledro-search-result:hover .moledro-search-result-arrow {
    color: var(--ms-blue);
    transform: translate(2px, -2px);
}

/* EMPTY STATE */

.moledro-search-empty {
    padding: 75px 20px;
    text-align: center;
}

.moledro-search-empty > i {
    display: block;
    margin-bottom: 20px;
    color: #b8c2ca;
    font-size: 42px;
}

.moledro-search-empty h2 {
    margin: 0 0 12px;
    color: var(--ms-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 23px;
    font-weight: 800;
}

.moledro-search-empty p {
    max-width: 470px;
    margin: 0 auto;
    color: var(--ms-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* PAGINATION */

.moledro-search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.moledro-search-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--ms-border);
    border-radius: 7px;
    background: #fff;
    color: var(--ms-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.moledro-search-pagination a:hover,
.moledro-search-pagination a.is-active {
    border-color: var(--ms-dark);
    background: var(--ms-dark);
    color: #fff;
}

/* TABLET */

@media (max-width: 991.98px) {
    .moledro-search-page {
        padding: 55px 0 75px;
    }
}

/* MOBILE */

@media (max-width: 767.98px) {

    .moledro-search-page {
        padding: 40px 0 65px;
    }

    .moledro-search-heading h1 {
        font-size: 32px;
    }

    .moledro-search-form {
        gap: 10px;
        min-height: 62px;
        padding: 7px 7px 7px 15px;
    }

    .moledro-search-form > i {
        font-size: 18px;
    }

    .moledro-search-form input {
        font-size: 13px;
    }

    .moledro-search-form button {
        min-width: 65px;
        min-height: 46px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .moledro-search-form button i {
        display: none;
    }

    .moledro-search-summary {
        align-items: flex-start;
        margin-top: 32px;
    }

    .moledro-search-summary h2 {
        font-size: 20px;
    }

    .moledro-search-result {
        gap: 12px;
        padding: 17px 15px;
    }

    .moledro-search-result-icon {
        width: 39px;
        height: 39px;
        font-size: 16px;
    }

    .moledro-search-result-body > strong {
        font-size: 13px;
    }

    .moledro-search-result-body > small {
        font-size: 11px;
    }

    .moledro-search-result-arrow {
        font-size: 15px;
    }
}

/* MOLEDRO | CONTACT PAGE | Add after existing site.css */
.contact-banner,.contact-page,.ert-contact-form-section{--mc-ink:#17191d;--mc-text:#4d5562;--mc-muted:#78818d;--mc-blue:#4db4dc;--mc-line:#e7ebef;--mc-paper:#f7f9fb;font-family:Inter,Arial,sans-serif}
.contact-banner *,.contact-page *,.ert-contact-form-section *{box-sizing:border-box}
.contact-banner{position:relative;isolation:isolate;overflow:hidden;background:#17191d;color:#fff;padding:76px 0 82px}
.contact-banner:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 15%,rgba(77,180,220,.2),transparent 45%),linear-gradient(115deg,#17191d,#242b35);z-index:-2}
.contact-banner-decoration{position:absolute;right:-100px;bottom:-210px;width:500px;height:500px;border:1px solid rgba(255,255,255,.1);border-radius:50%;pointer-events:none}
.contact-banner-decoration:after{content:"";position:absolute;inset:55px;border:1px solid rgba(77,180,220,.22);border-radius:50%}
.contact-banner-container{width:min(100% - 48px,1320px);margin-inline:auto}
.contact-banner-inner{position:relative;z-index:1}
.contact-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:42px;color:#aeb8c4;font-size:12px}
.contact-breadcrumb a{display:inline-flex;align-items:center;gap:8px;color:#d5dce4;text-decoration:none;transition:color .2s}
.contact-breadcrumb a:hover{color:#4db4dc}
.contact-breadcrumb>.bi-chevron-right{font-size:9px;color:#6b7886}
.contact-breadcrumb>span{color:#fff}
.contact-banner-kicker{display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;color:#7ad0f0;font-size:11px;font-weight:800;letter-spacing:2px}
.contact-banner-kicker:before{content:"";width:27px;height:2px;background:#4db4dc}
.contact-banner-content h1{margin:0 0 17px;color:#fff;font:800 clamp(42px,5.4vw,72px)/1.1 Manrope,Inter,sans-serif;letter-spacing:-2px}
.contact-banner-content p{max-width:640px;margin:0;color:#bbc5d0;font-size:15px;line-height:1.9}
.contact-page{padding:78px 0 96px;background:#fff;color:var(--mc-text)}
.contact-page .site-content-container,.ert-contact-form-section .site-content-container{width:min(100% - 48px,1320px);margin-inline:auto}
.contact-main{overflow:hidden;border:1px solid var(--mc-line);border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(23,25,29,.055)}
.contact-main>.row{align-items:stretch}
.contact-main-info{height:100%;padding:clamp(25px,3.2vw,50px);background:#fff}
.contact-main-label,.contact-location-label{display:inline-flex;align-items:center;gap:9px;color:#278fb7;font-size:10px;font-weight:800;letter-spacing:1.15px;text-transform:uppercase}
.contact-main-label i,.contact-location-label i{font-size:14px}
.contact-main-info>h2{margin:15px 0 27px;color:var(--mc-ink);font:800 clamp(23px,2.2vw,32px)/1.3 Manrope,Inter,sans-serif;letter-spacing:-.7px}
.contact-info-row{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-bottom:1px solid var(--mc-line);color:var(--mc-text);text-decoration:none;transition:color .2s}
a.contact-info-row:hover{color:#278fb7}
.contact-info-row-icon{display:grid;flex:0 0 40px;place-items:center;width:40px;height:40px;border:1px solid #dcecf4;border-radius:10px;background:#f1f9fc;color:#278fb7;font-size:16px}
.contact-info-row>div{min-width:0;padding-top:2px}
.contact-info-row small,.contact-person-head small{display:block;margin-bottom:7px;color:var(--mc-muted);font-size:10px;font-weight:800;letter-spacing:1.1px}
.contact-info-row p,.contact-info-row strong{display:block;margin:0;color:var(--mc-ink);font-size:13px;font-weight:650;line-height:1.8;overflow-wrap:anywhere}
a.contact-info-row:hover strong{color:#278fb7}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.contact-action-primary,.contact-action-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 17px;border:1px solid var(--mc-ink);border-radius:9px;font-size:12px;font-weight:800;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.contact-action-primary{background:var(--mc-ink);color:#fff}
.contact-action-primary:hover{background:#278fb7;border-color:#278fb7;color:#fff}
.contact-action-secondary{background:#fff;color:var(--mc-ink)}
.contact-action-secondary:hover{background:#f1f9fc;border-color:#4db4dc;color:#278fb7}
.contact-social,.contact-location-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.contact-social a,.contact-location-social a{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--mc-line);border-radius:9px;color:var(--mc-text);text-decoration:none;transition:all .2s}
.contact-social a:hover,.contact-location-social a:hover{background:var(--mc-ink);border-color:var(--mc-ink);color:#fff}
.contact-person{margin-top:28px;padding:22px;border:1px solid #deedf4;border-radius:12px;background:#f6fbfe}
.contact-person-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.contact-person-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#e1f3fb;color:#278fb7}
.contact-person-head strong{color:var(--mc-ink);font:800 14px Manrope,Inter,sans-serif}
.contact-person-name{margin-bottom:12px;color:var(--mc-ink);font-size:15px;font-weight:800}
.contact-person-links{display:flex;flex-direction:column;gap:10px}
.contact-person-links a{display:flex;align-items:center;gap:9px;color:var(--mc-text);font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.contact-person-links a:hover{color:#278fb7}
.contact-main-map{position:relative;min-height:100%;height:100%;background:#eef2f5}
.contact-main-map iframe{display:block;width:100%;height:100%;min-height:610px;border:0;filter:saturate(.8)}
.contact-map-empty{display:flex;min-height:610px;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:35px;color:var(--mc-muted);text-align:center}
.contact-map-empty i{font-size:38px;color:#4db4dc}
.contact-map-empty strong{color:var(--mc-ink);font-size:18px}
.contact-map-empty small{font-size:12px}
.contact-office{margin-top:34px}
.contact-office-image{position:relative;overflow:hidden;min-height:330px;max-height:530px;border-radius:15px;background:#202934}
.contact-office-image img{display:block;width:100%;height:clamp(330px,40vw,530px);object-fit:cover;transition:transform .5s}
.contact-office-image:hover img{transform:scale(1.025)}
.contact-office-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,16,24,.83),transparent 65%)}
.contact-office-caption{position:absolute;bottom:0;left:0;right:0;padding:clamp(23px,4vw,48px);color:#fff}
.contact-office-caption span{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#8bd7f2;font-size:10px;font-weight:800;letter-spacing:1.3px}
.contact-office-caption h3{margin:0;color:#fff;font:800 clamp(24px,3vw,38px)/1.3 Manrope,Inter,sans-serif}
.contact-locations{margin-top:86px}
.contact-section-heading{max-width:680px;margin-bottom:32px}
.contact-section-heading>span{display:inline-flex;align-items:center;gap:10px;margin-bottom:13px;color:#278fb7;font-size:10px;font-weight:800;letter-spacing:1.3px}
.contact-section-heading>span:before{content:"";width:26px;height:2px;background:#4db4dc}
.contact-section-heading h2{margin:0 0 13px;color:var(--mc-ink);font:800 clamp(27px,3vw,39px)/1.25 Manrope,Inter,sans-serif;letter-spacing:-1px}
.contact-section-heading p{margin:0;color:var(--mc-muted);font-size:13px;line-height:1.8}
.contact-location-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--mc-line);border-radius:13px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.contact-location-card:hover{border-color:#cfe7f1;box-shadow:0 12px 32px rgba(23,25,29,.06);transform:translateY(-2px)}
.contact-location-image{height:190px;overflow:hidden;background:#eef2f5}
.contact-location-image img{display:block;width:100%;height:100%;object-fit:cover}
.contact-location-body{display:flex;flex:1;flex-direction:column;padding:24px}
.contact-location-body h3{margin:12px 0 9px;color:var(--mc-ink);font:800 20px/1.4 Manrope,Inter,sans-serif}
.contact-location-company{margin-bottom:13px;color:var(--mc-muted);font-size:12px}
.contact-location-body>p{margin:0 0 17px;color:var(--mc-text);font-size:12px;line-height:1.8}
.contact-location-links{display:flex;flex-direction:column;gap:11px}
.contact-location-links a{display:flex;align-items:center;gap:10px;color:var(--mc-text);font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.contact-location-links a:hover{color:#278fb7}
.contact-location-links a i{color:#278fb7}
.contact-location-person{display:flex;flex-direction:column;gap:9px;margin-top:19px;padding:16px;border-radius:9px;background:#f6f9fb;font-size:12px}
.contact-location-person-title{display:flex;align-items:center;gap:8px;color:#278fb7;font-weight:800}
.contact-location-person>strong{color:var(--mc-ink)}
.contact-location-person>a{color:var(--mc-text);text-decoration:none;overflow-wrap:anywhere}
.contact-location-person>a:hover{color:#278fb7}
.contact-location-route{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:23px;color:var(--mc-ink);font-size:12px;font-weight:800;text-decoration:none}
.contact-location-route:hover{color:#278fb7}
.contact-empty{padding:80px 20px;border:1px solid var(--mc-line);border-radius:14px;text-align:center}
.contact-empty>span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;border-radius:14px;background:#edf8fc;color:#278fb7;font-size:28px}
.contact-empty h2{margin:0 0 12px;color:var(--mc-ink);font:800 23px Manrope,Inter,sans-serif}
.contact-empty p{margin:0;color:var(--mc-muted);font-size:13px}
/* CONTACT FORM */
.ert-contact-form-section{padding:90px 0 105px;background:#f5f7f9;color:var(--mc-text)}
.ert-contact-form-shell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,85px);align-items:start}
.ert-contact-form-intro{padding-top:28px}
.ert-contact-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:#278fb7;font-size:11px;font-weight:800;letter-spacing:1.3px}
.ert-contact-form-intro h2{max-width:470px;margin:0 0 19px;color:var(--mc-ink);font:800 clamp(31px,3.7vw,49px)/1.16 Manrope,Inter,sans-serif;letter-spacing:-1.5px}
.ert-contact-form-intro>p{max-width:470px;margin:0;color:var(--mc-text);font-size:14px;line-height:1.9}
.ert-contact-intro-foot{display:flex;align-items:center;gap:10px;margin-top:35px;padding-top:24px;border-top:1px solid #e1e5ea;color:var(--mc-muted);font-size:12px}
.ert-contact-intro-foot i{color:#278fb7;font-size:19px}
.ert-contact-form-card{min-width:0;padding:clamp(23px,3vw,43px);border:1px solid var(--mc-line);border-radius:16px;background:#fff;box-shadow:0 20px 55px rgba(23,25,29,.045)}
.ert-contact-form-card .alert{margin-bottom:22px;border-radius:9px;font-size:13px}
.ert-contact-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.ert-contact-label{display:block;margin-bottom:9px;color:var(--mc-ink);font-size:12px;font-weight:800}
.ert-contact-label span{color:#d52c83}
.ert-contact-field{position:relative;display:flex;align-items:center;min-height:52px;border:1px solid #e1e6eb;border-radius:9px;background:#fff;transition:border-color .2s,box-shadow .2s}
.ert-contact-field:focus-within{border-color:#4db4dc;box-shadow:0 0 0 3px rgba(77,180,220,.1)}
.ert-contact-field>i{position:absolute;left:16px;top:18px;color:#91a0ad;font-size:15px;pointer-events:none}
.ert-contact-field input,.ert-contact-field textarea{display:block;width:100%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--mc-ink);font:400 13px/1.6 Inter,Arial,sans-serif}
.ert-contact-field input{height:52px;padding:12px 14px 12px 43px}
.ert-contact-field textarea{min-height:150px;padding:15px 15px 15px 43px;resize:vertical}
.ert-contact-field input::placeholder,.ert-contact-field textarea::placeholder{color:#a0aab4}
.ert-contact-textarea{align-items:flex-start}
.ert-contact-security{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;border:1px solid #e1ebf0;border-radius:10px;background:#f7fbfd}
.ert-contact-security-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:9px;background:#e3f3fa;color:#278fb7;font-size:18px}
.ert-contact-security-text{display:flex;flex:1;flex-direction:column;gap:4px;min-width:130px}
.ert-contact-security-text strong{color:var(--mc-ink);font-size:12px}
.ert-contact-security-text small{color:var(--mc-muted);font-size:11px}
.ert-contact-equation{color:var(--mc-ink);font-size:15px;font-weight:800;white-space:nowrap}
.ert-contact-security>input{width:88px;min-height:42px;padding:8px;border:1px solid #dce4ea;border-radius:8px;background:#fff;color:var(--mc-ink);font-size:13px;text-align:center;outline:0}
.ert-contact-security>input:focus{border-color:#4db4dc}
.ert-contact-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:54px;padding:14px 21px;border:1px solid var(--mc-ink);border-radius:9px;background:var(--mc-ink);color:#fff;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,border-color .2s}
.ert-contact-submit:hover{background:#278fb7;border-color:#278fb7}
.ert-contact-submit i{font-size:18px}
.contact-banner a:focus-visible,.contact-page a:focus-visible,.ert-contact-form-section button:focus-visible,.ert-contact-form-section a:focus-visible{outline:3px solid #4db4dc;outline-offset:3px}
@media(max-width:991.98px){.contact-banner{padding:58px 0 64px}.contact-page{padding:55px 0 75px}.contact-main-map,.contact-main-map iframe,.contact-map-empty{min-height:410px}.ert-contact-form-shell{grid-template-columns:1fr;gap:30px}.ert-contact-form-intro{padding-top:0}.ert-contact-form-section{padding:65px 0 75px}.contact-locations{margin-top:60px}}
@media(max-width:767.98px){.contact-banner-container,.contact-page .site-content-container,.ert-contact-form-section .site-content-container{width:min(100% - 30px,1320px)}.contact-banner{padding:40px 0 48px}.contact-breadcrumb{margin-bottom:30px}.contact-banner-content h1{letter-spacing:-1px}.contact-banner-content p{font-size:13px}.contact-page{padding:35px 0 55px}.contact-main{border-radius:12px}.contact-main-info{padding:23px 20px}.contact-main-map,.contact-main-map iframe,.contact-map-empty{min-height:320px}.contact-office{margin-top:23px}.contact-office-image,.contact-office-image img{height:300px;min-height:300px}.contact-office-caption{padding:23px}.contact-locations{margin-top:52px}.contact-section-heading h2{font-size:28px}.contact-location-body{padding:21px}.ert-contact-form-section{padding:55px 0 65px}.ert-contact-form-card{padding:22px 18px}.ert-contact-form-intro h2{font-size:32px}.ert-contact-security{gap:10px}.ert-contact-security-text{min-width:110px}}
@media(max-width:390px){.contact-actions>a{width:100%}.ert-contact-security>input{width:100%}}
@media(prefers-reduced-motion:reduce){.contact-banner a,.contact-page a,.contact-page img,.contact-location-card,.ert-contact-form-section button{transition:none!important}.contact-location-card:hover{transform:none}.contact-office-image:hover img{transform:none}}


/* MOLEDRO FOOTER CONTACT ADDITIONS */

.moledro-footer .footer-contact-item {
    min-width: 0;
}

.moledro-footer .footer-contact-item > span:last-child {
    min-width: 0;
}

.moledro-footer .footer-contact-item strong {
    overflow-wrap: anywhere;
}

.moledro-footer .footer-contact-route {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: #4db4dc;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.moledro-footer .footer-contact-route:hover {
    color: #fff;
}

.moledro-footer .footer-contact-route i {
    font-size: 14px;
}


/* ============================================================
   MOLEDRO | QUICK QUOTE MODAL
   Premium Minimal Design
============================================================ */

.moledro-quote-modal {
    --qq-dark: #17191d;
    --qq-text: #4d5562;
    --qq-muted: #87919e;
    --qq-accent: #4db4dc;
    --qq-border: #e6eaf0;
    --qq-light: #f7f9fb;
    font-family: 'Inter', sans-serif;
    z-index: 1060;
}

.moledro-quote-modal .modal-dialog {
    max-width: 760px;
    margin: 1.75rem auto;
}

.moledro-quote-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 25px 90px rgba(10, 18, 30, .22);
}

.moledro-quote-modal .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
}

.moledro-quote-modal .modal-dialog-scrollable .modal-content {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8e0e7 transparent;
}

/* HEADER */

.moledro-quote-modal .qq-modal-header {
    position: relative;
    padding: 38px 43px 36px;
    background: var(--qq-dark);
    color: #fff;
}

.moledro-quote-modal .qq-modal-header::after {
    position: absolute;
    right: -80px;
    bottom: -145px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.moledro-quote-modal .qq-modal-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: #aab7c4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.moledro-quote-modal .qq-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qq-accent);
    box-shadow: 0 0 0 4px rgba(77,180,220,.12);
}

.moledro-quote-modal .qq-modal-header h2 {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 0 14px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(26px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -1.1px;
}

.moledro-quote-modal .qq-modal-header h2 span {
    display: block;
    color: var(--qq-accent);
}

.moledro-quote-modal .qq-modal-header p {
    position: relative;
    z-index: 1;
    max-width: 570px;
    margin: 0;
    color: #aeb9c5;
    font-size: 12px;
    line-height: 1.9;
}

.moledro-quote-modal .qq-modal-close {
    position: absolute;
    z-index: 3;
    top: 21px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.moledro-quote-modal .qq-modal-close:hover {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.17);
}

/* BODY */

.moledro-quote-modal .qq-modal-body {
    padding: 35px 43px 40px;
    background: #fff;
}

/* SELECTED SERVICE */

.moledro-quote-modal .qq-product-info {
    display: none;
    margin-bottom: 26px;
    padding: 17px 20px;
    border: 1px solid #d7edf6;
    border-left: 3px solid var(--qq-accent);
    border-radius: 9px;
    background: #f3fafd;
}

.moledro-quote-modal .qq-product-info.is-visible {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moledro-quote-modal .qq-product-info small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #248db6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.moledro-quote-modal .qq-product-info strong {
    color: var(--qq-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
}

/* LABELS */

.moledro-quote-modal .form-label {
    display: block;
    margin-bottom: 9px;
    color: #303742;
    font-size: 12px;
    font-weight: 700;
}

.moledro-quote-modal .form-label span {
    color: #d52c83;
}

/* FORM FIELDS */

.moledro-quote-modal .form-control {
    display: block;
    width: 100%;
    min-height: 49px;
    padding: 12px 15px;
    border: 1px solid #dfe5eb;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: var(--qq-dark);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}

.moledro-quote-modal .form-control::placeholder {
    color: #a1aab5;
    font-weight: 400;
}

.moledro-quote-modal .form-control:hover {
    border-color: #b9c8d3;
}

.moledro-quote-modal .form-control:focus {
    border-color: var(--qq-accent);
    background: #fff;
    color: var(--qq-dark);
    box-shadow: 0 0 0 4px rgba(77,180,220,.10);
}

.moledro-quote-modal textarea.form-control {
    min-height: 135px;
    resize: vertical;
}

.moledro-quote-modal input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.moledro-quote-modal input[type="number"]::-webkit-inner-spin-button,
.moledro-quote-modal input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* SECURITY */

.moledro-quote-modal .qq-security {
    padding: 20px 23px;
    border: 1px solid var(--qq-border);
    border-radius: 10px;
    background: var(--qq-light);
}

.moledro-quote-modal .qq-security-description {
    margin: 0 0 13px;
    color: var(--qq-muted);
    font-size: 11px;
    line-height: 1.7;
}

.moledro-quote-modal .qq-math-question {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border: 1px solid #dfe6ed;
    border-radius: 7px;
    background: #fff;
    color: var(--qq-dark);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}

.moledro-quote-modal .qq-math-question i {
    color: #258fb9;
    font-size: 17px;
}

.moledro-quote-modal .qq-security input {
    min-height: 49px;
}

/* SUBMIT BUTTON */

.moledro-quote-modal .qq-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 56px;
    margin-top: 5px;
    padding: 15px 20px;
    border: 1px solid var(--qq-dark);
    border-radius: 9px;
    background: var(--qq-dark);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}

.moledro-quote-modal .qq-submit i {
    font-size: 18px;
    transition: transform .2s;
}

.moledro-quote-modal .qq-submit:hover {
    border-color: #278fb7;
    background: #278fb7;
}

.moledro-quote-modal .qq-submit:hover i {
    transform: translate(2px, -2px);
}

.moledro-quote-modal .qq-submit:active {
    transform: scale(.995);
}

.moledro-quote-modal .qq-submit:focus-visible,
.moledro-quote-modal .qq-modal-close:focus-visible {
    outline: 3px solid var(--qq-accent);
    outline-offset: 3px;
}

/* PRIVACY NOTE */

.moledro-quote-modal .qq-form-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 15px 0 0;
    color: #89939f;
    font-size: 10px;
    line-height: 1.8;
    text-align: center;
}

.moledro-quote-modal .qq-form-note i {
    margin-top: 2px;
    color: #258fb9;
    font-size: 12px;
}

/* HONEYPOT */

.moledro-quote-modal .qq-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* TABLET */

@media (max-width: 991.98px) {
    .moledro-quote-modal .modal-dialog {
        max-width: 700px;
    }
}

/* MOBILE */

@media (max-width: 767.98px) {
    .moledro-quote-modal .modal-dialog {
        max-width: none;
        margin: 12px;
    }

    .moledro-quote-modal .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 24px);
    }

    .moledro-quote-modal .modal-content {
        border-radius: 13px;
    }

    .moledro-quote-modal .qq-modal-header {
        padding: 31px 24px 28px;
    }

    .moledro-quote-modal .qq-modal-kicker {
        max-width: calc(100% - 40px);
        font-size: 9px;
        line-height: 1.5;
    }

    .moledro-quote-modal .qq-modal-header h2 {
        font-size: 26px;
        letter-spacing: -.8px;
    }

    .moledro-quote-modal .qq-modal-header p {
        font-size: 11px;
    }

    .moledro-quote-modal .qq-modal-close {
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
    }

    .moledro-quote-modal .qq-modal-body {
        padding: 25px 22px 30px;
    }

    .moledro-quote-modal .qq-security {
        padding: 17px;
    }

    .moledro-quote-modal .qq-submit {
        min-height: 52px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .moledro-quote-modal .qq-modal-header {
        padding: 29px 18px 25px;
    }

    .moledro-quote-modal .qq-modal-body {
        padding: 22px 17px 27px;
    }

    .moledro-quote-modal .qq-modal-header h2 {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .moledro-quote-modal *,
    .moledro-quote-modal *::before,
    .moledro-quote-modal *::after {
        transition: none !important;
    }
}