:root {
    --font-default: "Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-primary: "Inter",sans-serif;
    --font-secondary: "Cardo",sans-serif
}

:root {
    --color-default: #fafafa;
    --color-primary: #003b6a;
    --color-secondary: #161718
}

:root {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-default);
    color: var(--color-default);
    background-color: #fff
}

a {
    color: var(--color-primary);
    text-decoration: none
}

    a:hover {
        color: #32cf93;
        text-decoration: none
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary)
}

.section-header {
    padding-bottom: 40px
}

    .section-header h2 {
        font-size: 14px;
        font-weight: 500;
        padding: 0;
        line-height: 1px;
        margin: 0 0 5px 0;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255,255,255,.6);
        font-family: var(--font-primary)
    }

        .section-header h2::after {
            content: "";
            width: 120px;
            height: 1px;
            display: inline-block;
            background: #5bd9a9;
            margin: 4px 10px
        }

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: var(--color-primary);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all .4s
}

    .scroll-top i {
        font-size: 24px;
        color: #fff;
        line-height: 0
    }

    .scroll-top:hover {
        background-color: #003b6a;
        color: #fff
    }

@keyframes lineincrease {
    0% {
        height: 0%
    }

    100% {
        height: 100%
    }
}

@keyframes linemove {
    0% {
        transform: translateY(200%)
    }

    100% {
        transform: translateY(-100%)
    }
}

@keyframes preloaderfinish {
    0% {
        width: 5 0%
    }

    100% {
        width: 0%
    }
}

.header {
    transition: all .5s;
    z-index: 997;
    padding: 30px 0;
    background-color: #fff
}

    .header .logo {
        transition: .3s
    }

        .header .logo img {
            max-height: 40px;
            margin-right: 8px
        }

        .header .logo h1 {
            font-size: 32px;
            margin: 0;
            font-weight: 400;
            color: #fff;
            font-family: var(--font-secondary)
        }

        .header .logo i {
            font-size: 32px;
            margin-right: 8px;
            line-height: 0
        }

@media (max-width:575px) {
    .header .logo h1 {
        font-size: 26px
    }

    .header .logo i {
        font-size: 24px
    }
}

.gallery {
    margin-top: 100px
}

    .gallery .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 10px
    }

        .gallery .gallery-item img {
            transition: .3s
        }

        .gallery .gallery-item:hover img {
            transform: scale(1.1)
        }

@keyframes animate-loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.hero {
    width: 100%;
    min-height: 30vh;
    background: #000;
    background-size: cover;
    position: relative;
    padding: 140px 0 60px 0
}

    .hero h2 {
        margin: 0 0 10px 0;
        font-size: 38px;
        font-weight: 700;
        color: #fff;
        font-family: var(--font-secondary)
    }

@media (max-width:768px) {
    .hero h2 {
        font-size: 32px
    }
}