@import url('https://fonts.googleapis.com/css?family=Roboto:400,500|Ubuntu:400,700&display=swap');
:root {
    --bela: #fff;
    --primary: #114084;
    --siva: #555;
    --light-blue: #82B7DC;
    --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(--primary);
}
section .container h1 {
    color: var(--primary)!important;
    font-style: bold !important;

}
/*********************
nav
*********************/
.navbar {
    border-top: 5px solid var(--primary);
    background: var(--black);
    padding: 0;
    margin: 0;
}
.navbar-brand {
    background: var(--primary);
    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(--primary);
    font-size: 20px;
    margin: 0 10px;
    transition: var(--transition);
}
.navbar .nav-link:hover {
    color: var(--light-blue);
}
/*********************
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(--primary);
    margin-bottom: 30px;
}
.bannerBtn {
    font-size: 20px;
    color: var(--bela);
    text-decoration: none;
    padding: 15px 25px;
    border: 2px solid var(--primary);
    background: transparent;
    text-transform: uppercase;
    margin: 0 10px;
    transition: var(--transition);
}
.bannerBtn:hover {
    background: var(--primary);
    color: var(--black);
    text-decoration: none;
}
/*********************
bannerIcons
*********************/
.bannerIcons {
    margin-top: -100px;
}
.bannerIcons ul li {
    background: var(--primary);
    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(--primary);
    padding: 50px;
    transition: var(--transition);
}
#services i:hover {
    background: var(--black);
}
#services .fa-apple {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
#services .fa-android {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
#services .fa-php {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
#services .fa-js {
    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/contact.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 70vh;
    clip-path: polygon(0 20%, 100% 0%, 100% 80%, 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;
}
#contact button {
    color: var(--bela);
    font-size: 2em;
    color: var(--primary);
    text-decoration: none;
    padding: 10px 30px;
    border: 2px solid var(--primary);
    background: transparent;
    text-transform: uppercase;
    margin-left: 30px;
    transition: var(--transition);
}
#contact button:hover {
    background: var(--primary);
    color: var(--black);
}
/*********************
team
*********************/
.carousel-caption {
    background: var(--primary);
    bottom: 80px;
}
#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-bg.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(--primary);
}
#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(--primary);
    font-size: 35px;
    margin: 0 10px;
    transition: var(--transition);
}
#projects i:hover {
    color: var(--siva);
}
/*********************
people
*********************/
#people img {
    width: 80%;
    border-radius: 50%;
    margin: -100px auto 0 auto;
}
#people .row:nth-child(2) {
    margin-top: 100px;
}
#people hr {
    background: var(--primary);
    border: none;
    height: 1px;
}
#people i {
    color: var(--primary);
    font-size: 30px;
    margin: 0 5px;
    transition: var(--transition);
}
#people i:hover {
    color: var(--siva);
}
/*********************
skills
*********************/
#skills {
    background-image: linear-gradient(var(--primary), var(--primary)), 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(--light-blue);
}
.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(--primary);
    border-radius: 0;
}
#pricing .btn:hover {
    background: var(--siva);
    color: var(--bela);
}
#pricing .action {
    background: var(--primary);
}
.phone-num {
    color: var(--bela);
}
/*********************
footer
*********************/
footer {
    background: var(--black);
    color: var(--bela);
}
footer i, footer h2 {
    color: var(--primary);
}
div#footerBottom {
    background-color: var(--primary);
    color: #fff;
}
div#footerBottom a{
    color:#fff;
    }
p.copyright-txt {
    margin-top: 15px;
}

@media only screen  and (max-width: 480px) {
    .bannerIcons ul li {
        display: inline-block !important;
        width: 27%;
        margin-bottom: 20px;
    }
    .d-flex {
        display: block !important;
        text-align: center;
    }
    .bannerBtn {
        display: inline-block;
        min-width: 225px;
    }
    .contactBtn {
        margin-top: 15px;
        margin-bottom: 30px;
    }
    section#services {
        padding: 0px !important;
        margin-top: 50px !important;
    }
    form.form-inline button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    p.copyright-txt {
        margin: 0px;
    }
    div#footerBottom {
    padding-top: 15px;
    padding-bottom: 15px;
    }
    .bannerIcons {
    margin-top: 0px !important;
    }

}