section.loading {
    height: 100vh;
    position: fixed;
    z-index: 15;
    top: 0; left: 0;
    width: 100%;
    background: linear-gradient(161deg, #e8f3fc 0.31%, #eef7ff 28.03%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zoomOut 0.5s ease-in-out forwards 3s;
}

section.loading svg {
    width: 230px;
}

.shape {
    fill: transparent;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation:
            draw 2s ease-in-out forwards,
            fillShape 1s ease-in-out forwards 2s;
}

.shape-navymain {
    stroke: #1a1f71;
    --fillColor: #1a1f71;
}

.shape-green {
    stroke: #8ab32e;
    --fillColor: #8ab32e;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillShape {
    to {
        fill: var(--fillColor);
        stroke-opacity: 0;
    }
}

@keyframes zoomOut {
    to {
        transform: scale(4);
        opacity: 0;
        visibility: hidden;
    }
}