@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Leckerli+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
    font-family: 'Poppins';
    scroll-behavior: smooth;
}
nav {
    animation: slidedown 0.3s ease-in-out;
}
.main{
    animation: appear 0.5s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 10%;
}
nav a{
    position: relative;
    transition: width 0.3s ease-in-out, color 0.3s ease-in-out;
    width: fit-content;
}
nav a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #084876;
    bottom: -2px;
    left: 0;
    transition: width 0.3s ease-in-out;
}
nav a:hover::before {
    width: 100%;
}
@keyframes appear {
    from {
        opacity: 0;
        scale: 0.4;
    }
    to {
        opacity: 1;
        scale : 1;
    }
}
@keyframes slidedown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
#content-left {
    animation: fromleft 3s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
@keyframes fromleft {
    from {
        opacity: 0;
        scale: 0.4;
    }
    to {
        opacity: 1;
        scale : 1;
    }
}
#content-right {
    animation: fromright 3s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
@keyframes fromright {
    from {
        opacity: 0;
        scale: 0.4;
    }
    to {
        opacity: 1;
        scale : 1;
    }
}

#home{
    scroll-margin-top: 100px;
}

::-webkit-scrollbar {
    width: 4px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background: #084876;
    border-radius: 10px;
}

.modal {
    animation: modalopen 0.3s ease-in-out;
}
@keyframes modalopen {
    from {
        top: -100px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

.box{
    animation: rotate 2s infinite;
}
.box:nth-child(2){
    animation-delay: 0.25s;
}
.box:nth-child(3){
    animation-delay: 0.50s;
}
@keyframes rotate {
    50% {
        transform: rotate(180deg);
    }
}
#product-scroll{
    animation: scrollleft 4s linear infinite;
}
@keyframes scrollleft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
#bouncy{
    animation: bouncy 2s ease-in-out infinite;
}
@keyframes bouncy {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
#h1{
    animation: totop 1s ease-in-out;
}
@keyframes totop {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
#type-writing{
    animation: toright 0.5s ease-in-out;
}
@keyframes toright {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
#button1{
    animation: tobottom 1.2s ease-in-out;
}
#button2{
    animation: tobottom 1.5s ease-in-out;
}
button#inquire:hover{
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.434);
}
@keyframes tobottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}