/* =========================================================
   DekoKZ
   Error Page / 404
   dkz-error.css
========================================================= */


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

.dkz-error{
    --dkz-error-purple:#582565;
    --dkz-error-purple-soft:#8b6ca0;
    --dkz-error-pink:#e93f70;
    --dkz-error-pink-dark:#d92f61;
    --dkz-error-text:#191719;
    --dkz-error-muted:#706a70;
    --dkz-error-border:rgba(92,61,91,.10);

    position:relative;

    width:100%;
    max-width:100%;

    padding:34px 28px 38px;

    box-sizing:border-box;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(232,178,196,.26) 0,
            rgba(232,178,196,.10) 20%,
            transparent 38%
        ),
        radial-gradient(
            circle at 91% 85%,
            rgba(201,181,219,.24) 0,
            rgba(201,181,219,.08) 20%,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fbf8f6 0%,
            #fffefd 45%,
            #fcf6f8 100%
        );
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.dkz-error__inner{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1180px;

    margin:0 auto;
    padding:52px 58px 24px;

    box-sizing:border-box;

    background:rgba(255,255,255,.82);

    border:1px solid var(--dkz-error-border);
    border-radius:28px;

    box-shadow:
        0 20px 55px rgba(65,42,64,.08);

    backdrop-filter:blur(2px);
}


/* =========================================================
   DECORATIVE WATERCOLOUR BLOBS
========================================================= */

.dkz-error__decor{
    position:absolute;

    z-index:0;

    pointer-events:none;

    border-radius:50%;

    filter:blur(1px);
}


.dkz-error__decor--left{
    width:420px;
    height:420px;

    left:-210px;
    bottom:-210px;

    background:
        radial-gradient(
            circle at 65% 35%,
            rgba(231,99,137,.21),
            rgba(231,99,137,.07) 42%,
            transparent 68%
        );
}


.dkz-error__decor--right{
    width:480px;
    height:480px;

    right:-250px;
    top:-220px;

    background:
        radial-gradient(
            circle at 40% 60%,
            rgba(116,75,140,.18),
            rgba(116,75,140,.06) 42%,
            transparent 70%
        );
}


/* =========================================================
   GOLD SPARKLES
========================================================= */

.dkz-error__sparkles{
    position:absolute;

    z-index:1;

    width:7px;
    height:7px;

    background:#d7ae5c;

    transform:rotate(45deg);

    opacity:.55;

    pointer-events:none;
}


.dkz-error__sparkles--one{
    left:11%;
    top:24%;
}


.dkz-error__sparkles--two{
    right:12%;
    top:34%;

    width:5px;
    height:5px;
}


.dkz-error__sparkles--three{
    right:18%;
    bottom:17%;

    width:6px;
    height:6px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.dkz-error__image{
    position:relative;

    display:block;

    width:100%;
    max-width:100%;

    margin:0 0 34px;
    padding:0;

    overflow:hidden;

    border-radius:22px;

    box-sizing:border-box;
}


.dkz-error__image picture{
    display:block;

    width:100%;

    margin:0;
    padding:0;
}


.dkz-error__image img{
    display:block;

    width:100%;
    max-width:100%;
    height:auto;

    margin:0;
    padding:0;

    object-fit:cover;
}


/* =========================================================
   404 CONTENT OVER IMAGE
========================================================= */

.dkz-error__image-content{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    width:74%;
    max-width:800px;

    margin:0;
    padding:0;

    text-align:center;

    z-index:5;
}


/* 404 */

.dkz-error__code{
    margin:0;
    padding:0;

    font-family:Georgia, "Times New Roman", serif;

    font-size:105px;
    font-weight:400;
    line-height:.9;

    letter-spacing:-4px;

    color:var(--dkz-error-purple);

    text-align:center;
}


/* Heart ornament */

.dkz-error__ornament{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    margin:15px auto 14px;
    padding:0;

    color:#e77b98;
}


.dkz-error__ornament span{
    display:block;

    width:65px;
    height:2px;

    margin:0;

    border-radius:5px;

    background:linear-gradient(
        90deg,
        transparent,
        #e998ad
    );
}


.dkz-error__ornament span:last-child{
    background:linear-gradient(
        90deg,
        #e998ad,
        transparent
    );
}


/* H1 */

.dkz-error__title{
    margin:0 !important;
    padding:0 !important;

    font-family:inherit;

    font-size:40px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    color:var(--dkz-error-text) !important;

    text-align:center !important;
}


/* =========================================================
   CONTENT UNDER IMAGE
========================================================= */

.dkz-error__hero{
    position:relative;

    width:100%;
    max-width:800px;

    margin:0 auto;
    padding:0;

    text-align:center;
}


.dkz-error__description{
    width:100%;
    max-width:680px;

    margin:0 auto;
    padding:0;

    font-size:17px;
    line-height:1.65;

    color:var(--dkz-error-muted);

    text-align:center;
}


.dkz-error__description p{
    margin:0;
    padding:0;
}


.dkz-error__description p + p{
    margin-top:4px;
}


/* =========================================================
   ACTIONS
========================================================= */

.dkz-error__actions{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:34px;

    width:100%;

    margin:28px auto 0;
    padding:0;
}


/* Homepage button */

.dkz-error__home.button{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:12px !important;

    min-width:210px !important;

    margin:0 !important;
    padding:14px 30px !important;

    box-sizing:border-box !important;

    border:0 !important;
    border-radius:50px !important;

    background:
        linear-gradient(
            135deg,
            #e94370,
            #df3a69
        ) !important;

    box-shadow:
        0 10px 25px rgba(229,61,106,.19);

    color:#fff !important;

    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.2 !important;

    text-decoration:none !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.dkz-error__home.button:hover{
    background:
        linear-gradient(
            135deg,
            #df3969,
            #d32f5e
        ) !important;

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:
        0 13px 29px rgba(229,61,106,.25);
}


.dkz-error__home svg{
    flex:0 0 auto;
}


/* Back button */

.dkz-error__back{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    margin:0;
    padding:10px 2px 8px;

    background:none;

    border:0;
    border-bottom:1px solid rgba(228,58,104,.55);

    color:var(--dkz-error-pink);

    font-family:inherit;
    font-size:16px;
    font-weight:500;

    cursor:pointer;

    transition:
        color .2s ease,
        border-color .2s ease;
}


.dkz-error__back:hover{
    color:var(--dkz-error-pink-dark);

    border-color:var(--dkz-error-pink-dark);
}


.dkz-error__back-arrow{
    font-size:21px;
    line-height:1;
}


/* =========================================================
   DIRECTIONS
========================================================= */

.dkz-error__directions{
    position:relative;

    display:block;

    width:100%;

    margin:48px 0 0;
    padding:0;

    clear:both;

    z-index:2;
}


/* Section title */

.dkz-error__section-title{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:16px;

    width:100%;

    margin:0 0 25px;
    padding:0;
}


.dkz-error__section-text{
    flex:0 0 auto;

    font-size:16px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:.18em;
    text-transform:uppercase;

    color:#79538e;
}


.dkz-error__section-line{
    display:block;

    width:60px;
    height:1px;

    background:#e0809d;
}


/* =========================================================
   CARDS
========================================================= */

.dkz-error__cards{
    display:grid;

    grid-template-columns:repeat(3, minmax(0,1fr));

    gap:20px;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* Card */

.dkz-error-card{
    position:relative;

    display:grid;

    grid-template-columns:82px minmax(0,1fr);

    align-items:start;

    gap:20px;

    width:100%;
    min-width:0;
    min-height:174px;

    margin:0;
    padding:26px;

    box-sizing:border-box;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(255,252,252,.93)
        );

    border:1px solid rgba(104,73,100,.09);
    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(60,41,59,.07);

    color:inherit !important;

    text-align:left;

    text-decoration:none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.dkz-error-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 38px rgba(60,41,59,.12);

    border-color:rgba(228,58,104,.20);

    color:inherit !important;
}


/* Watercolour spot */

.dkz-error-card::after{
    content:"";

    position:absolute;

    z-index:0;

    right:-55px;
    bottom:-65px;

    width:175px;
    height:175px;

    border-radius:50%;

    pointer-events:none;
}


.dkz-error-card--live::after{
    background:
        radial-gradient(
            circle,
            rgba(238,141,168,.18),
            transparent 67%
        );
}


.dkz-error-card--online::after{
    background:
        radial-gradient(
            circle,
            rgba(165,131,194,.17),
            transparent 67%
        );
}


.dkz-error-card--course::after{
    background:
        radial-gradient(
            circle,
            rgba(214,180,145,.18),
            transparent 67%
        );
}


/* Icon */

.dkz-error-card__icon{
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;
    justify-content:center;

    width:76px;
    height:76px;
    min-width:76px;

    margin:0;
    padding:0;

    border-radius:50%;

    box-sizing:border-box;
}


.dkz-error-card--live .dkz-error-card__icon{
    background:#fce8ed;

    color:#e34c76;
}


.dkz-error-card--online .dkz-error-card__icon{
    background:#eee7f3;

    color:#9367ab;
}


.dkz-error-card--course .dkz-error-card__icon{
    background:#f5ebe3;

    color:#b68d70;
}


.dkz-error-card__icon svg{
    display:block;

    width:44px;
    height:44px;
}


/* Card content */

.dkz-error-card__content{
    position:relative;
    z-index:2;

    display:flex;

    flex-direction:column;

    width:100%;
    min-width:0;

    margin:0;
    padding:0;
}


.dkz-error-card__title{
    margin:2px 0 7px;
    padding:0;

    font-size:20px;
    font-weight:700;
    line-height:1.25;

    white-space:normal;

    color:#201c20;
}


.dkz-error-card__text{
    width:100%;
    min-height:48px;

    margin:0;
    padding:0;

    font-size:14px;
    line-height:1.5;

    white-space:normal;

    color:#6f686e;
}


.dkz-error-card__link{
    display:inline-flex;

    align-items:center;

    gap:9px;

    width:auto;

    margin-top:auto;
    padding-top:13px;

    color:var(--dkz-error-pink);

    font-size:14px;
    font-weight:600;
}


.dkz-error-card__link span{
    font-size:19px;

    transition:transform .2s ease;
}


.dkz-error-card:hover .dkz-error-card__link span{
    transform:translateX(4px);
}


/* =========================================================
   HELP
========================================================= */

.dkz-error__help{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    width:100%;

    margin:28px 0 0;

    clear:both;

    color:#888087;

    font-size:13px;
    line-height:1.5;

    text-align:center;
}


.dkz-error__help svg{
    flex:0 0 auto;

    color:var(--dkz-error-pink);
}


.dkz-error__help a{
    color:var(--dkz-error-pink) !important;

    text-decoration:none !important;
}


.dkz-error__help a:hover{
    text-decoration:underline !important;
}


/* =========================================================
   TABLET
   769–1100px
========================================================= */

@media (min-width:769px) and (max-width:1100px){

    .dkz-error{
        padding:28px 22px 34px;
    }


    .dkz-error__inner{
        padding:40px 34px 24px;
    }


    .dkz-error__image{
        margin-bottom:30px;
    }


    .dkz-error__image-content{
        width:78%;
    }


    .dkz-error__code{
        font-size:88px;
    }


    .dkz-error__ornament{
        margin:12px auto;
    }


    .dkz-error__title{
        font-size:34px !important;
    }


    .dkz-error__description{
        font-size:16px;
    }


    .dkz-error__cards{
        grid-template-columns:repeat(3, minmax(0,1fr));

        gap:14px;
    }


    .dkz-error-card{
        grid-template-columns:58px minmax(0,1fr);

        gap:13px;

        min-height:160px;

        padding:20px 16px;
    }


    .dkz-error-card__icon{
        width:58px;
        height:58px;
        min-width:58px;
    }


    .dkz-error-card__icon svg{
        width:34px;
        height:34px;
    }


    .dkz-error-card__title{
        font-size:17px;
    }


    .dkz-error-card__text{
        min-height:44px;

        font-size:13px;
    }


    .dkz-error-card__link{
        font-size:13px;
    }

}


/* =========================================================
   MOBILE
   до 768px
========================================================= */

@media (max-width:768px){

    .dkz-error{
        padding:16px 12px 28px;
    }


    .dkz-error__inner{
        padding:22px 14px 20px;

        border-radius:20px;
    }


    /* Image */

    .dkz-error__image{
        margin:0 0 24px;

        border-radius:16px;
    }


    .dkz-error__image img{
        width:100%;
        height:auto;

        object-fit:cover;
    }


    /* Overlay */

    .dkz-error__image-content{
        width:88%;
    }


    .dkz-error__code{
        font-size:66px;

        letter-spacing:-2px;
    }


    .dkz-error__ornament{
        gap:8px;

        margin:9px auto;
    }


    .dkz-error__ornament span{
        width:36px;
    }


    .dkz-error__title{
        font-size:25px !important;
        line-height:1.2 !important;
    }


    /* Description */

    .dkz-error__description{
        font-size:15px;
        line-height:1.6;
    }


    /* Actions */

    .dkz-error__actions{
        flex-direction:column;

        gap:10px;

        margin-top:23px;
    }


    .dkz-error__home.button{
        width:100% !important;
        max-width:270px !important;
    }


    .dkz-error__back{
        font-size:14px;
    }


    /* Directions */

    .dkz-error__directions{
        margin-top:36px;
    }


    .dkz-error__section-title{
        gap:10px;

        margin-bottom:18px;
    }


    .dkz-error__section-text{
        font-size:13px;

        letter-spacing:.11em;
    }


    .dkz-error__section-line{
        width:28px;
    }


    /* Cards */

    .dkz-error__cards{
        grid-template-columns:1fr;

        gap:12px;
    }


    .dkz-error-card{
        grid-template-columns:64px minmax(0,1fr);

        gap:17px;

        min-height:0;

        padding:18px;

        border-radius:16px;
    }


    .dkz-error-card__icon{
        width:62px;
        height:62px;
        min-width:62px;
    }


    .dkz-error-card__icon svg{
        width:37px;
        height:37px;
    }


    .dkz-error-card__title{
        margin-top:0;

        font-size:18px;
    }


    .dkz-error-card__text{
        min-height:0;

        font-size:13px;
    }


    .dkz-error-card__link{
        padding-top:8px;

        font-size:13px;
    }


    /* Help */

    .dkz-error__help{
        align-items:flex-start;

        margin-top:22px;

        font-size:12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    .dkz-error__inner{
        padding-left:12px;
        padding-right:12px;
    }


    .dkz-error__image-content{
        width:92%;
    }


    .dkz-error__code{
        font-size:58px;
    }


    .dkz-error__title{
        font-size:22px !important;
    }


    .dkz-error__ornament{
        margin:7px auto;
    }


    .dkz-error__ornament span{
        width:28px;
    }


    .dkz-error-card{
        grid-template-columns:56px minmax(0,1fr);

        gap:13px;

        padding:16px 14px;
    }


    .dkz-error-card__icon{
        width:54px;
        height:54px;
        min-width:54px;
    }


    .dkz-error-card__icon svg{
        width:32px;
        height:32px;
    }

}