/* Loader Styles start here */
body:not(.loaded) {
    height: 100vh;
    overflow-y: hidden;
}

.loader-wrapper {
    --line-width: 5px;
    --curtain-color: #14191F;
    --seperation-line-color: #08182c;
    --outer-line-color: #a8dadc;
    --middle-line-color: #457b9d;
    --inner-line-color: #1d3557;
    position:fixed;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    z-index:9999;
    background-color: rgba(0,0,0, 0.3);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: all 0.3s 0.6s ease-out;
}

.loader-wrapper .loader-section {
    position: absolute;
    background: var(--curtain-color);
    overflow: visible;
}

.loader-wrapper .loader-section.section-left-bottom {
    top: 0;
    left: 0;
    bottom: 50%;
    width: 50%;
}
.loader-wrapper .loader-section.section-left-bottom img {
    position: absolute;
    top: 100%;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 10001;
}
.loader-wrapper .loader-section.section-left-top {
    top: 50%;
    left: 0;
    width: 50%;
    bottom: 0;
}
.loader-wrapper .loader-section.section-left-top img {
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: translate(50%, 50%);
    z-index: 10002;
}
.loader-wrapper .loader-section.section-right-bottom {
    bottom: 0;
    width: 50%;
    right: 0;
    top: 50%;
}
.loader-wrapper .loader-section.section-right-bottom img {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translate(-50%, 50%);
    z-index: 10001;
}
.loader-wrapper .loader-section.section-right-top {
    bottom: 50%;
    right: 0;
    top: 0;
    width: 50%;
}
.loader-wrapper .loader-section.section-right-top img {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 10002;
}

/* Loaded Styles */
.loaded .loader-wrapper .loader-section.section-left-bottom, .loaded .loader-wrapper .loader-section.section-left-top {
    box-shadow: 0 0 12px 6px var(--seperation-line-color);
}
.loaded .loader-wrapper .loader-section.section-right-bottom, .loaded .loader-wrapper .loader-section.section-right-top {
    box-shadow: 0 0 12px 6px var(--seperation-line-color);
}
.loaded .loader-wrapper .loader-section.section-left-bottom, .loaded .loader-wrapper .loader-section.section-left-top {
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-left-top img {
    transform: translate(-100%, 50%);
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-left-bottom img {
    transform: translate(-100%, -50%);
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-right-bottom, .loaded .loader-wrapper .loader-section.section-right-top {
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-right-top img {
    transform: translate(100%, -50%);
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader-wrapper .loader-section.section-right-bottom img {
    transform: translate(100%, 50%);
    transition: all 0.8s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .loader {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}
.loaded .loader-wrapper {
    visibility: hidden;
    opacity: 0;
    backdrop-filter: none;
}