html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    background:
        radial-gradient(circle at top left,var(--ks27-detail-link-soft),transparent 34%),
        var(--ks27-detail-site-bg);
    color:var(--ks27-detail-body-text);
}

a{
    color:var(--ks27-detail-link);
}

a:hover{
    color:var(--ks27-detail-button);
}

img{
    max-width:100%;
}

.ks27-detail-system-message,
.ks27-detail-404{
    width:100%;
    min-height:430px;
    padding:80px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top left,var(--ks27-detail-link-soft),transparent 34%),
        linear-gradient(180deg,var(--ks27-detail-section-alt-bg),var(--ks27-detail-site-bg));
}

.ks27-detail-system-message > div,
.ks27-detail-404-card{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:44px 30px;
    border-radius:30px;
    text-align:center;
    background:var(--ks27-detail-card-bg);
    border:1px solid var(--ks27-detail-card-border);
    box-shadow:0 24px 70px rgba(15,23,42,.14);
}

.ks27-detail-system-message strong,
.ks27-detail-404-card h1{
    display:block;
    margin:0 0 12px;
    color:var(--ks27-detail-card-title);
    font-size:clamp(28px,4vw,42px);
    font-weight:950;
    line-height:1.15;
}

.ks27-detail-system-message p,
.ks27-detail-404-card p{
    margin:0 auto 24px;
    max-width:560px;
    color:var(--ks27-detail-card-text);
    font-size:16px;
    line-height:1.7;
}

.ks27-detail-404-code{
    width:88px;
    height:88px;
    margin:0 auto 18px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ks27-detail-button-text);
    background:linear-gradient(135deg,var(--ks27-detail-button),var(--ks27-detail-link));
    box-shadow:0 18px 42px <?= ks27_dt_e(ks27_dt_rgba($buttonColor, .30)) ?>;
    font-size:31px;
    font-weight:950;
}

.ks27-detail-404-card a{
    min-height:48px;
    padding:0 24px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--ks27-detail-button-text);
    background:linear-gradient(135deg,var(--ks27-detail-button),var(--ks27-detail-link));
    text-decoration:none;
    font-size:14px;
    font-weight:950;
}

.page-title-area,
.page-banner-area,
.banner-area,
.blog-details-area,
.service-details-area,
.services-details-area,
.product-details-area,
.contact-area,
.gallery-area,
.video-area,
.faq-area,
.team-area,
.search-area{
    background-color:var(--ks27-detail-section-bg);
    color:var(--ks27-detail-body-text);
}

.page-title-content h1,
.page-title-content h2,
.blog-details-area h1,
.blog-details-area h2,
.blog-details-area h3,
.service-details-area h1,
.service-details-area h2,
.service-details-area h3,
.services-details-area h1,
.services-details-area h2,
.services-details-area h3,
.product-details-area h1,
.product-details-area h2,
.product-details-area h3{
    color:var(--ks27-detail-card-title);
}

.blog-details-area p,
.service-details-area p,
.services-details-area p,
.product-details-area p,
.contact-area p,
.faq-area p{
    color:var(--ks27-detail-card-text);
}

.card,
.blog-card,
.service-card,
.single-blog,
.single-service,
.contact-form,
.faq-item,
.accordion-item{
    background-color:var(--ks27-detail-card-bg);
    color:var(--ks27-detail-card-text);
    border-color:var(--ks27-detail-card-border);
}

.btn,
.default-btn,
.theme-btn,
button[type="submit"],
input[type="submit"]{
    background:linear-gradient(135deg,var(--ks27-detail-button),var(--ks27-detail-link)) !important;
    color:var(--ks27-detail-button-text) !important;
    border-color:transparent !important;
    box-shadow:0 14px 30px <?= ks27_dt_e(ks27_dt_rgba($buttonColor, .22)) ?>;
}

.footerArea{
    background:var(--ks27-detail-footer-bg) !important;
    color:var(--ks27-detail-footer-text) !important;
}

.footerArea h1,
.footerArea h2,
.footerArea h3,
.footerArea h4,
.footerArea h5,
.footerArea h6,
.footerAreaTitle{
    color:var(--ks27-detail-footer-title) !important;
}

.footerArea a,
.footerArea p,
.footerArea li,
.footerArea small{
    color:var(--ks27-detail-footer-text) !important;
}

@media(max-width:767px){
    .ks27-detail-system-message,
    .ks27-detail-404{
        width:100vw;
        padding:58px 12px;
    }

    .ks27-detail-system-message > div,
    .ks27-detail-404-card{
        border-radius:24px;
        padding:34px 18px;
    }
}