@import url('https://fonts.googleapis.com/css?family=Roboto:400,500|Ubuntu:400,700&display=swap');
:root {
    --bela: #fff;
    --orange: rgb(255, 138, 91);
    --siva: #555;
    --moka: #FCEADE;
    --black: #000;
    --transition: .4s ease;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
}
.py-5 {
    padding: 100px 0 !important;
}
.title h2 {
    font-size: 45px;
    text-transform: uppercase;
    color: var(--orange);
}
/*********************
nav
*********************/
.navbar {
    border-top: 5px solid var(--orange);
    background: var(--black);
    padding: 0;
    margin: 0;
}
.navbar-brand {
    background: var(--orange);
    padding: 15px 40px;
    color: var(--bela);
    text-shadow: 0 0 2px var(--black);
    transition: var(--transition);
}
.navbar-brand:hover {
    color: var(--black);
    text-shadow: 0 0 2px var(--bela);
}
.navbar .nav-link {
    color: var(--orange);
    font-size: 20px;
    margin: 0 10px;
    transition: var(--transition);
}
.navbar .nav-link:hover {
    color: var(--moka);
}
/*********************
banner
*********************/
#banner {
    background-image: linear-gradient(rgba(0, 0, 0,.1), rgba(0, 0, 0,.99)), url(img/banner.jpg);
    height: 80vh;
    background-position: center;
    background-size: cover;
    position: relative;
}
#banner::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--black);
    transform: skewY(10deg);
    transform-origin: left bottom;
    bottom: 0;
    z-index: -1;
}
#banner .row {
    height: 80vh;
}
#banner h2 {
    color: var(--orange);
    margin-bottom: 30px;
}
.bannerBtn {
    font-size: 20px;
    color: var(--bela);
    text-decoration: none;
    padding: 15px 25px;
    border: 2px solid var(--orange);
    background: transparent;
    text-transform: uppercase;
    margin: 0 10px;
    transition: var(--transition);
}
.bannerBtn:hover {
    background: var(--orange);
    color: var(--black);
    text-decoration: none;
}
/*********************
bannerIcons
*********************/
.bannerIcons {
    margin-top: -100px;
}
.bannerIcons ul li {
    background: var(--orange);
    margin: 0 10px;
    padding: 10px;
    color: var(--bela);
}
.bannerIcons i {
    font-size: 50px;
    transition: var(--transition);
}
.bannerIcons i:hover {
    color: var(--black);
}
/*********************
services
*********************/
#services {
    margin-top: 100px;
}
#services i {
    font-size: 60px;
    color: var(--bela);
    background: var(--orange);
    padding: 50px;
    transition: var(--transition);
}
#services i:hover {
    background: var(--black);
}
#services .fa-dolly-flatbed {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
#services .fa-truck-moving {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
#services .fa-shuttle-van {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
#services .fa-file-alt {
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/*********************
contact
*********************/
#contact {
    background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(img/Serbia_Map2.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 70vh;
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
}
#contact .row {
    height: 50vh;
}
#contact h2 {
    color: var(--bela);
    font-size: 5em;
    text-transform: uppercase;
}
#contact input {
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--bela);
    border-radius: 0;
    font-size: 2.3em;
    color: var(--bela);
}
#contact button {
    color: var(--bela);
    font-size: 2em;
    color: var(--orange);
    text-decoration: none;
    padding: 10px 30px;
    border: 2px solid var(--orange);
    background: transparent;
    text-transform: uppercase;
    margin-left: 30px;
    transition: var(--transition);
}
#contact button:hover {
    background: var(--orange);
    color: var(--black);
}
/*********************
team
*********************/
.carousel-caption {
    background: var(--orange);
    bottom: 60px;
}
#team .row {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
/*********************
about
*********************/
#about {
    background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(img/about-bg2.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
    padding: 100px 0 200px 0;
}
#about img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
#about .accordion > .card > .card-header {
    background: var(--orange);
}
#about .card {
    border: 1px solid var(--black);
}
.btn-link {
    color: var(--black);
    text-decoration: none;
    font-size: 25px;
}
.btn-link:hover {
    color: var(--bela);
    text-decoration: none;
}
.btn-link::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f0a4";
}
/*********************
projects
*********************/
#projects {
    padding-top: 50px;
}
#projects .col-md-3 {
    padding: 0 !important;
}
#projects .imgContainer {
    position: relative;
    background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7));
    overflow: hidden;
}
#projects .imgContainer img:hover {
    opacity: .7;
    cursor: pointer;
    transition: var(--transition);
}
#projects .imgIcons {
    position: absolute;
    bottom: -10rem;
    background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7));
    width: 100%;
    transition-duration: 1s;
    text-align: center;
    padding: 20px 0;
}
#projects .imgContainer:hover .imgIcons {
    bottom: 0;
}
#projects i {
    color: var(--orange);
    font-size: 35px;
    margin: 0 10px;
    transition: var(--transition);
}
#projects i:hover {
    color: var(--siva);
}
/*********************
people
*********************/
#people img {
    width: 80%;
    border: 1px solid var(--siva);
    border-radius: 50%;
    margin: -100px auto 0 auto;
}
#people .row:nth-child(2) {
    margin-top: 100px;
}
#people hr {
    background: var(--orange);
    border: none;
    height: 1px;
}
#people i {
    color: var(--orange);
    font-size: 30px;
    margin: 0 5px;
    transition: var(--transition);
}
#people i:hover {
    color: var(--siva);
}
/*********************
skills
*********************/
#skills {
    background-image: linear-gradient(rgba(255, 138, 91,.7), rgba(255, 138, 91,.7)), url(img/progress.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
    padding: 100px 0 100px 0;
}
.progress-bar {
    background-color: black;
}
/*********************
pricing
*********************/
#pricing .card {
    border-radius: 0;
}
#pricing .card-title {
    padding-top: 20px;
}
.priceNum {
    position: relative;
    background: var(--moka);
}
.money {
    position: absolute;
    top: 30%;
    left: 20%;
    font-size: 25px;
}
.moneyNum {
    font-size: 60px;
}
.moneyEnd {
    font-size: 18px;
}
#pricing  .list-group li:first-child {
    padding-top: 50px;
}
#pricing  .list-group .list-group-item {
    font-size: 15px;
}
#pricing .list-group {
    border-radius: 0 !important;
}
#pricing .btn {
    background: var(--orange);
    border-radius: 0;
}
#pricing .btn:hover {
    background: var(--siva);
    color: var(--bela);
}
#pricing .action {
    background: var(--orange);
}
/*********************
footer
*********************/
footer {
    background: var(--black);
    color: var(--bela);
}
footer i, footer h2 {
    color: var(--orange);
}