@import'theme_css/_theme.scss';
@import'color/_theme_color.scss';
// ======================================= //

.sticky-wrapper.is-sticky .menu {
    box-shadow: $shadow-three;
    transition: $transition;
    padding: 5px 0;
    backdrop-filter: blur(15px);
    background: $white;
    .navbar .container-fluid .navbar-brand {
        color: black;
        span{
            color: $primary;
        }
    }
    .navbar .container-fluid .offcanvas-body .navbar-nav .nav-item {
        .nav-link {
            color: $black;
            &:hover {
                color: $primary;
            }
        }
        .active {
            color: $primary;
        }
    }
}

.menu {
    padding: 10px;
    background: transparent;
    backdrop-filter: blur(3px);
    box-shadow: 0px 0px 0px 0px;
    transition: all ease-in-out .3s;
    position: relative;
    z-index: 999;
    .navbar {
        padding: 5px 0px;
        transition: $transition;
        .container-fluid {
            padding: 0;
            .navbar-brand {
                color: white;
                font-family: "Orbitron", serif;
                transition: $transition;
                span{
                    color: $primary;
                    font-weight: 700;
                }
            }
            .navbar-toggler {
                border: none;
                outline: none;
                box-shadow: none;
                color: $white;
            }
            .offcanvas-body {
                .navbar-nav {
                    .nav-item {
                        margin: 0 6px;
                        .nav-link {
                            color: $white;
                            font-family: "Jost", sans-serif;
                            transition: $transition;
                            text-transform: capitalize;
                            &:hover {
                                color: $primary;
                            }
                        }
                        .active {
                            color: $primary;
                            font-weight: 500;
                        }
                    }
                    .dropdown {
                        .dropdown-menu {
                            border-radius: 0px;
                            padding: 0;
                            transform: $transition;
                            padding: 10px 15px;

                            li {
                                display: block;
                                margin: 0;
                                border-bottom: 1px solid #cccccc57;
                                a {
                                    border-radius: 3px;
                                    padding: 6px 10px;
                                    font-size: 14px;
                                    font-weight: 400;
                                    &:hover {
                                        background: transparent;
                                        color: $primary;
                                    }
                                }

                                &:last-child {
                                    border-bottom: none;
                                }
                            }
                        }
                        .show{
                            margin-top: 0;
                        }
                    }
                }
            }
        }
    }
}
// end menu style =========================

.header-section{
    background: url("../images/nextstepweb-bg-center.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    &::before{
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: url(../images/bg-design1.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: .3;
    }
    .head-hero{
        position: relative;
        padding: 50px 0;
        min-height: 100vh;
        .head-title{
            text-align: center;
            h1{
                color: $white;
                font-weight: 600;
                span{
                    color: $primary;
                }
                img{
                    width: 100px;
                }
            }
        }
        .head-title-content{
            text-align: center;
            p{
                color: rgb(212, 212, 212);
            }
        }
    }
}
// end header-section style ===============

.service{
    position: relative;
    
    .service-wrapper{
        padding: 30px;
        margin: 10px 0;
        border-radius: 10px;
        border: 2px solid $white;
        background: #f1f4ff61;
        min-height: 305px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .service-icon{
            height: 80px;
            width: 80px;
            background: $secondary;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            .icon{
                fill: white;
                height: 50px;
                width: 50px;
            }
        }
        .text-box{
            h3{
                font-family: "Jost", sans-serif;
                font-size: 22px;
            }
        }
    }
    .used{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        .image{
            margin: 3px 15px;
            height: 45px;
        }
    }
    .tamplates{
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 50px;
        .tamplates-number{
            max-width: 65%;
            opacity: .8;
            text-align: center;
        }
        &::before{
            position: absolute;
            content: "";
            bottom: 0px;
            left: 0px;
            width: 100%;
            box-shadow: 0px -10px 55px 53px white;
            margin: 0 auto;
            background: $primary;
            z-index: 22;
        }
        .position-star{
            position: absolute;
            top: 0;
            right: 10%;
            z-index: 1;
            img{
                width: 60px;
                animation: animate-round 60s linear infinite;
                @keyframes animate-round {
                    0%{
                        transform: rotate(0deg);
                    }
                    100%{
                        transform: rotate(360deg);
                    }
                }
            }
        }
    }
    .highlight-text{
        text-align: center;
        position: relative;
        z-index: 99;
        font-size: 40px;
        font-weight: 700;
        font-family: "Jost", sans-serif;
    }
    .counte-box{
        text-align: center;
        margin: 5px 0;
        h3{
            margin-bottom: 0px;
           .counter{
                font-size: 35px;
                font-weight: 700;
                font-family: "Jost", sans-serif;
           }
           .plus{
                color: $primary;
                font-size: 25px;
                font-weight: 900;
           }
        }
        p{
            color: black;
        }
    }
    // 
    .position-right{
        position: absolute;
        top: 5%;
        right: 0;
        z-index: -1;
        animation: animate-up 10s linear infinite;
            @keyframes animate-up {
                0%{
                    transform: translateY(0px);
                }
                50%{
                    transform: translateY(-200px);
                }
                100%{
                    transform: translateY(0px);
                }
            }
    }
    .position-left{
        position: absolute;
        top: 25%;
        left: 0;
        z-index: -1;
    }
}
// end service-section style ==============

.project-section{
    .project-wrapper{
        margin: 10px 0;
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #f1f1f1;
        transition: $transition;
        .project-img{
            img{
                width: 100%;
                border-radius: 5px;
            }
        }
        .project-details{
            h3{
                font-family: "Jost", sans-serif;
                font-size: 20px;
                margin-bottom: 0px;
            }
        }
        &:hover{
            box-shadow: 0px 7px 19px -9px #ddd;
            transform: translateY(-6px);
        }
    }
}