:root {
    --roshel-surface: #ffffff;
    --roshel-border: rgba(18, 37, 63, 0.08);
    --roshel-shadow: 0 20px 60px rgba(15, 38, 76, 0.12);
    --roshel-bg: #f6f8fc;
    --roshel-bg2: #eef3fb;
    --roshel-image-shadow: 0 18px 45px rgba(15, 38, 76, 0.16);
}

body {
    background-color: var(--roshel-bg);
    background-image:
        radial-gradient(1200px 800px at 20% -20%, rgba(0, 189, 224, 0.10), transparent 55%),
        radial-gradient(1100px 700px at 85% 10%, rgba(57, 26, 166, 0.08), transparent 60%),
        linear-gradient(180deg, var(--roshel-bg2), var(--roshel-bg));
    background-attachment: fixed;
}

.dz-preloader-1 {
    background-color: var(--roshel-bg);
    background-image:
        radial-gradient(900px 600px at 20% 20%, rgba(0, 189, 224, 0.10), transparent 60%),
        radial-gradient(900px 600px at 80% 10%, rgba(57, 26, 166, 0.08), transparent 65%),
        linear-gradient(180deg, var(--roshel-bg2), var(--roshel-bg));
}

/* Align loader animation colors with brand palette (avoid the default pink/blue accents). */
.dz-preloader-1 .dz_ring_1 {
    stroke: var(--bs-primary);
}

.dz-preloader-1 .dz_ring_2 {
    stroke: var(--bs-secondary);
}

.dz-preloader-1 .dz_ring_3 {
    stroke: var(--bs-primary);
    opacity: 0.75;
}

.dz-preloader-1 .dz_ring_4 {
    stroke: var(--bs-secondary);
    opacity: 0.6;
}

.page-wraper {
    background: transparent;
}

.banner-text {
    max-width: 680px;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

.roshel-hero-media,
.roshel-product-intro,
.roshel-contact-media,
.roshel-gallery-card,
.roshel-logo-card,
.roshel-service-box,
.roshel-card,
.roshel-list-card,
.roshel-table,
.roshel-alert {
    border-radius: 24px;
}

.roshel-card,
.roshel-service-box,
.roshel-gallery-card,
.roshel-logo-card,
.content-bx.style-6.shadow-sm,
.roshel-product-intro,
.roshel-table {
    background: var(--roshel-surface);
    box-shadow: var(--roshel-shadow);
    border: 1px solid var(--roshel-border);
}

.roshel-card .icon-bx,
.roshel-list-card .icon-bx {
    background: rgba(34, 120, 204, 0.08);
}

.roshel-strength-icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(18, 37, 63, 0.10);
}

.roshel-strength-icon .icon-cell {
    font-size: 24px;
    color: var(--bs-primary);
    line-height: 1;
}

.roshel-strength-letter {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(18, 37, 63, 0.45);
}

.roshel-vm-card .dz-info {
    padding: 2rem;
}

.roshel-vm-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.roshel-vm-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(34, 120, 204, 0.10);
    color: var(--bs-primary);
    border: 1px solid rgba(18, 37, 63, 0.10);
    box-shadow: 0 14px 34px rgba(15, 38, 76, 0.12);
    font-size: 22px;
}

.roshel-feature {
    min-height: 100%;
    padding: 1.75rem 1.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.roshel-service-box {
    overflow: hidden;
}

.roshel-service-box .dz-media img,
.roshel-gallery-card .dz-media img,
.roshel-contact-media img,
.roshel-product-intro img {
    width: 100%;
    display: block;
}

.dz-media > img,
.hero-thumbnail .thumbnail,
.roshel-hero-media img,
.roshel-product-intro img,
.roshel-contact-media img,
.roshel-service-box .dz-media img {
    border-radius: 28px;
    box-shadow: var(--roshel-image-shadow);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    will-change: transform;
}

a:hover .dz-media > img,
a:focus-visible .dz-media > img,
.box-hover:hover .dz-media > img {
    transform: translateY(-2px);
    box-shadow: 0 26px 70px rgba(15, 38, 76, 0.20);
    filter: saturate(1.02);
}

.roshel-service-box .dz-info {
    padding: 2rem;
}

.roshel-about-media .item1,
.roshel-about-media .item2 {
    position: absolute;
}

.roshel-about-media {
    position: relative;
    min-height: 480px;
}

.roshel-about-media > .dz-media img {
    border-radius: 30px;
}

.roshel-about-media .item1 {
    right: 1.25rem;
    bottom: 4rem;
    max-width: 230px;
}

.roshel-about-media .item2 {
    left: 1.25rem;
    bottom: 1.25rem;
}

.roshel-logo-card {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.roshel-logo-card img {
    max-height: 60px;
    width: auto;
}

.site-header .logo-header img.roshel-navbar-logo {
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}

.site-header .main-bar .logo-header {
    width: auto;
}

.site-header .main-bar .logo-header .roshel-navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.site-header .main-bar .logo-header .roshel-navbar-brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 3px;
}

.site-footer .footer-logo img.roshel-footer-logo {
    max-height: 56px;
    width: auto;
    height: auto;
    display: inline-block;
}

@media (max-width: 991.98px) {
    .site-header .logo-header img.roshel-navbar-logo {
        max-height: 48px;
    }

    .site-header .main-bar .logo-header .roshel-navbar-brand {
        padding: 5px 8px;
        border-radius: 12px;
    }

    .site-footer .footer-logo img.roshel-footer-logo {
        max-height: 48px;
    }
}

.roshel-search-form {
    margin-bottom: 2rem;
}

.roshel-search-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(18, 37, 63, 0.65);
    background: rgba(18, 37, 63, 0.06);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    z-index: 3;
}

.roshel-search-clear:hover,
.roshel-search-clear:focus-visible {
    color: rgba(18, 37, 63, 0.92);
    background: rgba(18, 37, 63, 0.10);
}

.form-floating > .form-control[data-products-search-input] {
    padding-right: 52px;
}

.roshel-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.product-page-status {
    font-weight: 600;
    color: var(--bs-secondary);
}

.roshel-product-card {
    height: 100%;
    overflow: hidden;
}

.roshel-product-card .dz-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-height: 240px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(237, 244, 255, 0.9));
}

.roshel-product-card .dz-media img {
    max-height: 200px;
    object-fit: contain;
}

.roshel-product-card .dz-info {
    padding: 1.75rem;
}

.roshel-product-card .sub-title {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.roshel-table .table {
    margin-bottom: 0;
}

.roshel-table th,
.roshel-table td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.roshel-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.roshel-alert i {
    font-size: 1.2rem;
    margin-top: 0.15rem;
}

.roshel-gallery-card {
    display: block;
    overflow: hidden;
}

.roshel-gallery-card .dz-media img {
    min-height: 300px;
    object-fit: cover;
}

.social-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    .roshel-about-media {
        min-height: auto;
        padding-bottom: 12rem;
    }

    .roshel-about-media .item1 {
        right: 0;
    }

    .roshel-about-media .item2 {
        left: 0;
    }
}

@media (max-width: 767.98px) {
    .roshel-pagination {
        flex-direction: column;
    }

    .banner-text {
        font-size: 0.95rem;
    }

    .roshel-about-media {
        padding-bottom: 0;
    }

    .roshel-about-media .item1,
    .roshel-about-media .item2 {
        position: static;
        margin-top: 1rem;
    }
}