:root{
    --theme-color: #1D2088;
}

html, body {
    max-width: var(--website-max-width);
    margin: auto;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    /* scroll-behavior: smooth; */
}

.text-shadow{
    text-shadow: 1px 1px 2px black;
}
.text-theme-color{
    color: var(--theme-color);
}
.\!text-theme-color{
    color: var(--theme-color) !important;
}
.bg-theme-color{
    background-color: var(--theme-color);
}
a{
    text-decoration: none;
    color: var(--theme-color);
}

button:disabled{
    background-color: #999;
}
button:disabled:hover{
    background-color: #bbb;
}

/* @media screen and (max-width: 420px){
    html, body {
        width: 420px;
        overflow: auto;
    }
} */

/* Nav */
nav{
    background: rgb(255,255,255);
    /* background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,243,255,0) 100%); */
}

@media screen and (max-width: 768px){

    .navbar:has( .active ){
        box-shadow: 0px 0px 10px rgba(0,0,0,0.3);;
    }
    #nav-menu.active{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
    }
    #nav-menu li{
        display: block;
        padding: 5px 1rem;
        /* text-align: center; */

    }
    #nav-menu li:hover{
        background-color: #f2f2f2;
    }
}

.scroll-up .navbar{
    transform: translateY(0);
    transition: transform 0.5s ease-in-out;
}
.scroll-down .navbar{
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}


.btn-scroll-down{
    --scroll-down-color: #fff;
    position: relative;
}
.btn-scroll-down a{
    color: var(--scroll-down-color);
}
.btn-scroll-down::before{
    --line-width: 2px;
    position: absolute;
    content: '';
    width: var(--line-width);
    height: 20px;
    bottom: 120%;
    left: calc(50% - var(--line-width) / 2);
    background-color: var(--scroll-down-color);
    box-shadow: 1px 1px 2px #000;
}

.vh{
    min-height: 100vh;
}
@media screen and (max-width: 1199px){
    .vh{
        min-height: 100%;
    }
}

/* =================  marquee */

.marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 100px;
    overflow-x: hidden;
  }

  .track {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 32s linear infinite;
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

/* =================  marquee */


.floating-ani{
    --animation-delay: 0s;
    animation: floating 2s var(--animation-delay) ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}