html, body {
    font-family: 'Montserrat';
    font-size: 22px;
    background-color: #eee3dc;
    /* background-image: url("../asset/image/background/beige.png"); */
    background-size: cover;
    background-repeat: none;
    background-position: center;
}

/*home page*/
.home-content{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title h1{
    color: #77201c;
    font-family: inherit;
    animation: fadeIn 3s ease-in-out;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }

}
.home-logo{
    position: absolute;
    top: 20px;
    left: 20px;
}
.home-logo img{
    width: 150px;
    height: auto;
    transform: translateY(-10px);
}
.home-logo h2{
    position: absolute;
    top: 5px;
    left: 130px;
    color: #77201c;
    font-family: inherit;
    font-weight: normal;
    animation: fadeIn 3s ease-in-out;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.home-nav{
    position: absolute;
    top: 55px;
    right: 20px;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 20px;
    align-items: start;
    gap: 20px;
    animation: fadeIn 3s ease-in-out;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.home-logo img{
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 2;
    }
}
.hamburger-menuHome{
    grid-column: 2;
    grid-row: 1;
    background: none;
    border: none;
    color: #77201c;
    font-size: 30px;
    cursor: pointer;
    /* order: 2; */
}
.menuHome{
    display: none;
    /* align-items: center;   */
}
.menuHome.active{
    display: flex;
    grid-column: 1 / 3;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 10px;
}
.menuHome a{
    text-decoration: none;
    color: #77201c;
}
.shiftin-nav{
    grid-column: 1;
    grid-row: 1;
}
.shiftin-nav a{
    text-decoration: none;
    color: #77201c;
    text-align: center;
    font-size: 30px;
}

/*animation 2*/
.animation-2{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-2 h1{
    color: #77201c;
    font-family: inherit;
    animation: fadeUp 3s ease-in-out;
}
@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }

}

/*animation 3*/
.animation-3{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-3 h1{
    color: #77201c;
    font-family: inherit;
    animation: fadeLeft 3s ease-in-out;
}
@keyframes fadeLeft{
    from{
        opacity: 0;
        transform: translateX(-30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }

}

/*animation 4*/
.animation-4{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-4 h1{
    color: #77201c;
    font-family: inherit;
    animation: zoomIn 3s ease-in-out;
}
@keyframes zoomIn{
    from{
        opacity: 0;
        transform: scale(0.9);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }

}

/*animation 5*/
.animation-5{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-5 h1{
    color: #77201c;
    font-family: inherit;
    animation: slideUp 3s ease-in-out;
}
@keyframes slideUp {
    from { transform: translateY(60px); }
    to   { transform: translateY(0); }
}

/*animation 6*/
.animation-6{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-6 h1{
    color: #77201c;
    font-family: inherit;
    animation: blurIn 3s ease-in-out;
}
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/*animation 7*/
.animation-7{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-7 h1{
    color: #77201c;
    font-family: inherit;
    animation: scaleIn 3s ease-in-out;
}
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*animation 8*/
.animation-8{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-title-8 h1{
    color: #77201c;
    font-family: inherit;
    animation: letterReveal 3s ease-in-out;
}
@keyframes letterReveal {
    from {
        opacity: 0;
        letter-spacing: 15px;
    }

    to {
        opacity: 1;
        letter-spacing: normal;
    }
}