:root{
    --main-block-padding: 100px;
}

body {
    display: flex;
    justify-content: center;
}
.container {
    width: 100%;
    /* height: 100px; */
    /* border: 2px solid red; */
    max-width: 1280px;
}

.part{
    width: 100%;
    height: 200px;
    /* border: 2px solid green; */
    padding: 0px var(--main-block-padding);
}

.footer{
    width: 100px;
    height: 100vh;
}



.part-title{
    /* height: 100px; */
    width: 100%;
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.part-title > span:first-child{
    font-size: 1.1rem;
    text-transform: capitalize;
    color: rgb(67, 67, 67);
}

.part-title > span:last-child{
    font-size: 2.8rem;
    /* text-transform: capitalize; */
    white-space: pre-line;
    font-weight: 500;
    letter-spacing: 1px;
}

.loading-box {
    width: 100vw;
    height: 100vh;
    background-color: white;
    position: fixed;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    animation: disappear 1.5s 2s ease-in-out forwards;
}

.loading-box > img {
    animation: logoAni 1s ease-in-out alternate infinite;
}

.loading-bar {
    width: 100%;
    height: 6px;
    background-color: rgb(215, 95, 95);
    position: absolute;
    top: 0;
    transform: translate(-100%);
    animation: barMoving 2s ease-in-out forwards;
}

@keyframes logoAni {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes barMoving {
    0% {
        transform: translate(-100%);
    }
    20% {
        transform: translate(-50%);
    }
    70% {
        transform: translate(-30%);
    }
    100% {
        transform: translate(0%);
    }
}

@keyframes disappear {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}