:root{
    --bg-primary: #1E1E1E;
    --bg-green-900: #0D2818;
    --text-color-primary: #fcfcfc;
    --text-color-secondary: #16DB65;
}

*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

html,
body{
    font-family: 'Montserrat', sans-serif !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-color-primary);
}

nav{
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--bg-green-900);
}
nav > .container .navbar-brand > img{
    height: 2rem;
}
nav > .container ul{
    display: flex;
    list-style: none;
}
nav > .container ul li > a{
    color: var(--text-color-primary);
    text-decoration: none;
    transition: ease-in .3s;
}
nav > .container ul li > a:hover{
    text-decoration: none;
    color: var(--text-color-secondary);
}

main section#home h1{
    font-weight: 900;
    color: var(--text-color-primary);
}
main section#home h1,
main section#home h2,
main section#home p{
    color: var(--text-color-primary);
}
main section#home h1 > span{
    color: var(--text-color-secondary);
}
main section#home .col-auto a > svg{
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-color-primary);
    transition: ease-in .3s;
}
main section#home .col-auto a:hover > svg{
    color: var(--text-color-secondary)
}

main section#portfolio h3,
main section#contact h3{
    color: var(--text-color-secondary);
}

main section#portfolio .card{
    background-color: #0E0E0E;
}
main section#portfolio .card .card-body h5,
main section#portfolio .card .card-body p{
    color: var(--text-color-primary)
}
main section#portfolio .card .card-body > a{
    background-color: var(--text-color-secondary);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bg-primary);
    border: none;
}
main section#portfolio .card .card-body svg{
    width: 1.5rem;
    height: 1.5rem;
}
main section#portfolio .card .card-body .fa-html5{
    color: #FC490B;
}
main section#portfolio .card .card-body .fa-css3-alt{
    color: #006BC0;
}
main section#portfolio .card .card-body .fa-square-js{
    color: #F7DF1E;
}
main section#portfolio .card .card-body .fa-react{
    color: #00D8FF;
}
main section#portfolio .card .card-body .fa-bootstrap{
    color: #563D7C;
}

main section#contact a svg{
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-color-primary);
    transition: ease-in .3s;
}
main section#contact a:hover svg{
    color: var(--text-color-secondary);
}

footer{
    border-top: 1px solid var(--bg-green-900);
}
footer .container p{
    color: var(--text-color-secondary);
}


/*SWIPER*/
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{
    background: var(--text-color-secondary);
}


@media(max-width: 768px){
    .swiper-button-next,
    .swiper-button-prev{
        display: none !important;
    }
}

@media(min-width: 998px){
    main section#home .box-text{
        width: 520px;
    }

    .swiper-button-prev{
        left: -40px !important;
    }
    .swiper-button-next{
        right: -40px !important;
    }
    .swiper-button-next,
    .swiper-button-prev{
        color: var(--text-color-secondary)!important;
    }
}