html {
    scroll-behavior: smooth;
}

.slide {
    width: 100%;
    height: 100%;
    transition: 1s;
    position: absolute;
}

.nav-link {
    list-style: none;
}

.nav-link a {
    text-decoration: none;
    color: black;
    transition: color 0.3s;
    position: relative;
}

.nav-link a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #ffc246;
    transition: width 0.3s;
}

.nav-link a:hover {
    color: #ffc246;
}

.nav-link a:hover::after {
    width: 100%;
}

.mobile-view {
    display: none;
}

.ham-menu,
.ham-menu i {
    display: none;
}

.menu-open {
    opacity: 1;
}

.menu-open.active {
    opacity: 0;
}

.menu-close {
    opacity: 0;
}

.menu-close.active {
    opacity: 1;
}

.submenu,
.ccsubmenu {
    display: none;
}

.submenu.active,
.ccsubmenu.active {
    display: block;
}

.slider {
    height: 250px;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    margin: auto;
    position: relative;
}

.slider-track {
    display: flex;
    justify-content: space-evenly;
    width: calc(250px * 16);
    animation: scroll 20s linear infinite;
}

.slider-track .image img {
    width: 100%;
}

.slider-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-150px * 16));
    }
}

@media (max-width: 786px) {

    #web-view,
    .mobile-view {
        display: none;
    }

    .mobile-view.active {
        display: block;
        transition: all 1s ease-in-out;
    }

    .ham-menu,
    .ham-menu i {
        display: block;
    }


    .submenu.active,
    .submenu.active li,
    .ccsubmenu.active,
    .ccsubmenu.active li {
        display: block;
    }

    #header {
        position: fixed;
        top: 0;
    }

    #contact-nav {
        display: none;
    }

    main {
        margin-top: 80px !important;
    }

}