::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 5px;
}

.container-fluid {
    padding: 0px;
    margin: 0px;
}

ul li, li, a, h1, h2, h3, h4, h5, h6, p, span, i, button, input {
    font-family: 'Montserrat', sans-serif;
    color: black;
    text-decoration: none;
}

/* navbar  */
.navbar {
    padding: 30px 120px;
    transition: 0.6s;
}

.navbar-toggler {
    background: #fed136;
    border: none;
    padding: 10px 6px;
    outline: none;
}

.navbar-toggler span {
    display: block;
    width: 22px;
    height: 2px;
    border: 1px;
    background: white;
}

.navbar-toggler span + span {
    width: 18px;
    margin: 4px 0 0 4px;
    width: 22px;
}

.navbar-toggler span + span + span {
    width: 10px;
    margin-left: 4px;
}

.navbar-brand img {
    height:90px
}

.navbar h1, .services h1, .portfolio #title, .about h1 {
    color: #fed136 !important;
}

.navbar h1 {
    font-size: 32px;
}
.nav-link {
    color: white !important;
}

.nav-link:hover, .privacy-policy p {
    color: #fed136 !important;
}

.scrolling-active{
    background-color: black;
    padding: 10px 120px;
    transition: 0.6s;
}

/* banner  */
.banner{
    position: relative;
    background: url(img/header-bg.jpg);
    min-height:100vh;
    background-size: cover;
    background-position: center;
}

.banner .container{
    padding-top: 100px;
}

.masthead {
    margin: 0px auto;
    text-align: center;
    position: absolute;
    /* top: 260px; */
    top: 370px;
    bottom: 370px;
    left: 50px;
    right: 50px;
    color: white
}

/* .masthead img {
    height: 300px;
    border-radius: 150px;
} */

.masthead h1, .masthead h3 {
    color: white
}

.masthead h1 {
    font-size: 35px;
}

.masthead h3 {
    font-size: 20px;
}

/* services  */
.services, .about, .contact {
    padding: 35px
}

.services h1, .portfolio #title, .about h1, .contact h1 {
    font-size: 40px;
    text-align:center;
    padding: 40px 0px;
    font-weight: 600;
}

.card button {
    background-color: #fed136;
    color: black;
    border-radius: 7px;
    width: 100%;
    padding: 12px;
    border: 0px
}

/* portfolio  */
.portfolio {
    background-color: #FAFAFA;
    padding: 40px 170px 0px 170px;
} 

.portfolio img {
    width: 300px;
}

.portfolio .job {
    text-align: justify;
    padding: 0px 0px 20px 15px ;
}

.portfolio .description {
    padding: 0px 80px
}

.description, .about p {
    font-size: 15px;
}

.portfolio h1 {
    font-size: 22px;
}

.place {
    padding-bottom: 40px;
}

.card h4 a {
    font-size: 19px
}

.card h5 {
    font-size: 15px;
}

/* about  */
.about img{
    padding-bottom: 40px;
    height: 400px;
    border-radius: 300px;
}

.about h2, .about p {
    padding-bottom: 20px;
    text-align: center;
}

/* contact  */
.contact {
    position: relative;
    background: url(img/3004483.jpg);
    background-size: cover;
    background-position: center;
    padding: 50px 70px 100px 70px
}

.contact h1 {
    color: #fed136;
    padding: 30px 0px
}

.contact input {
    width: 100%;
    height: 60px;
    padding: 20px;
    border-radius: 10px;
    margin: 30px 0px;
    display: flex;
}

.contact #message {
    padding-bottom: 215px;
    display: flexbox;
}

.contact button {
    height: 70px;
    background-color: #fed136;
    color: white; 
    border-radius: 10px;
    padding: 0px 40px;
    display: block;
    margin: 0px auto
}

/* footer  */
footer {
    padding:40px 0px;
    text-align: center;
}

footer i {
    font-size: 35px;
    padding: 0px 10px
}

.fa-twitter-square {
    color: #009DEB
}

.fa-linkedin {
    color: #006FAA
}

.fa-facebook-square {
    color: #0B3EBE
}




/* media queries */
@media (min-width: 1201px) and (max-width:1375px){
    .navbar h1 {
        font-size: 32px !important;
    }

    .masthead {
        top:320px;
    }

    /* portfolio  */
    .portfolio {
        padding: 40px 70px;
    }
}

@media (min-width: 990px) and (max-width:1200px){
    .navbar h1 {
        font-size: 32px !important;
    }

    .masthead {
        top:300px;
    }

    /* services  */
    .services {
        padding: 35px;
    }

    /* portfolio  */
    .portfolio {
        padding: 40px 15px;
    }

    .portfolio .description {
        padding: 0px 60px
    }
}

@media (min-width: 768px) and (max-width:989px){
    .navbar h1 {
        font-size: 27px;
    }

    .masthead {
        top:280px;
    }

    /* services  */
    .services, .about {
        padding: 0px;
    }

    /* portfolio  */
    .portfolio {
        padding: 40px 15px;
    }

    .portfolio h1 {
        font-size: 25px;
    }

    .portfolio img {
        width: 250px;
    }

    .portfolio .description {
        padding: 0px 30px
    }

    /* contact  */
    .contact {
        padding: 30px 70px 80px 70px;
    }

    /* footer  */
    footer {
        padding: 20px 0px;
    }

    footer p {
        padding-top: 15px;
    }
}

@media (min-width: 376px) and (max-width: 768px) {
    .navbar h1 {
        font-size: 17px;
    }

    .navbar {
        padding: 10px 40px
    }

    .masthead {
        top:260px;
    }

    /* services  */
    .services, .about {
        padding: 0px;
    }

    .services h1 {
        padding: 20px 0px;
    }

    .services h1, .portfolio #title, .about h1, .contact h1 {
        font-size: 38px;
    }

    /* portfolio  */
    .portfolio {
        padding: 40px 15px;
    }

    .portfolio h1 {
        font-size: 20px;
    }

    .portfolio img {
        width: 190px;
    }

    .portfolio .description {
        padding: 0px 30px
    }

    /* about  */
    .about img {
        height: 350px;
    }

    /* contact  */
    .contact {
        padding: 30px
    }

    /* footer  */
    footer {
        padding: 15px 0px;
    }

    footer p {
        padding-top: 15px;
    }
}

@media (max-width: 375px) {
    .navbar h1 {
        font-size: 17px;
    }

    .navbar {
        padding: 10px 20px
    }

    .masthead {
        top:250px;
    }

    .services, .about {
        padding: 0px;
    }

    .services h1, .portfolio #title {
        padding: 20px 0px;
    }

    .services h1, .portfolio #title, .about h1, .contact h1 {
        font-size: 35px;
    }

    /* portfolio  */
    .portfolio {
        padding: 40px 15px;
    }

    .portfolio .description {
        padding: 0px;
    }

    /* about  */
    .about img {
        height: 300px;
    }

    /* contact  */
    .contact {
        padding: 20px
    }

    /* footer  */
    footer {
        padding: 15px 0px;
    }

    footer p {
        padding-top: 15px;
    }
}