#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-icon {
    width: 76px;
    height: 65px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(110px);
    animation:
        plIconFadeIn 0.5s ease-out    0s    both,
        plIconSlide  0.7s ease-in-out 0.5s  both;
}
.logo-icon svg { width: 100%; height: 100%; display: block; }

.logo-text {
    width: 219px;
    height: 65px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(70px);
    animation: plTextSlide 0.7s ease-out 0.8s both;
}
.logo-text svg { width: 100%; height: 100%; display: block; }

.logo-container.pl-zoom {
    animation: plLogoZoom 0.8s ease-in forwards;
}
#preloader.pl-hide {
    animation: plFadeOut 0.35s ease-out forwards;
    pointer-events: none;
}

@keyframes plIconFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes plIconSlide {
    from { transform: translateX(110px); }
    to   { transform: translateX(0); }
}
@keyframes plTextSlide {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes plLogoZoom {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes plFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@media (max-width: 600px) {
    .logo-icon { width: 61px; height: 52px; }
    .logo-text { width: 175px; height: 52px; }
}