.bgimage {
    height: 100vh;
    background: url('/images/Bollmeier-005.png');
    background-color: #C6D5F4;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    margin-top: 55px;
}

/* text css above hero image*/
.hero_title {
    font-size: 7vw;
}

.hero_desc {
    font-size: 2rem;
}

.hero-text {
    text-align: right;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
    color: #3B3B45;
}

.imageAboutPage {
    width: 100%;
}

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
}

.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}

.card-text {
    min-height: 8.5vh;
}

.card-title {
    text-align: center;
}

.card:hover .servicesIcon {
    color: blue;
}

.servicesText:hover {
    border: 1px solid blue;
}

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: #3B3B45;
}

a.nav-link,
a.navbar-brand,
.navbar-toggler-icon {
    color: #C6D5F4;
}

.navbar-toggler-icon:hover,
a.nav-link:hover,
a.navbar-brand:hover {
    color: white;
}

/* social media icons styling */
.social-icons {
    font-size: 1.5em;
    cursor: pointer;
    padding-right: 10px;
}

.fa-facebook:hover,
.fa-instagram:hover,
.fa-twitter:hover,
.fa-linkedin:hover,
.fa-twitch:hover {
    color: white;
}

.bi {
    color: #C6D5F4;
}

.bi:hover {
    color: white
}

/* footer styling */
#footer {
    background-color: #3B3B45;
    text-align: center;
    color: #C6D5F4;
    font-size: .5rem;
}

#portfolio {
    background-color: #C6D5F4;
    padding-bottom: 30px;
    padding-top: 15px;
    margin-bottom: 0px;
}

.portfolioContent {
    background-color: white !important;
    padding: 10px;
    text-align: center;
    transition: background-color 250ms linear, transform 250ms linear;
}

.portfolioContent:hover {
    background-color: skyblue !important;
    cursor: pointer;
    transform: scale(105%);
}

body a {
    text-decoration: none;
}

.portfolioContent a {
    color: #3B3B45;
}

@media only screen and (max-width:800px) {
    /* CSS rules here */

    .bgimage {
        height: 85vh;
        background-repeat: no-repeat;
        background-size: auto 70%;
        background-position: center top;
    }

    .hero_title {
        font-size: 2.5rem
    }

    .hero-text {
        width: 100%;
        height: 25vh;
        vertical-align: middle;
        transform: translate(-50%, 70%);
        background-color: #C6D5F4;
        text-align: center;
        /* position: absolute; */
        color: #3B3B45;
        /* text-shadow: white 1px 3px; */
        padding-left: 5vw;
        padding-top: 10px;
        /* border: 1px black solid; */
    }

    .hero-desc {
        font-size: 1rem;
    }

    .card-text {
        min-height: 6vh;
    }

    .card-img-top {
        width: 100px !important;
        height: 100px !important;
        text-align: center;
    }

    .imageAboutPage {
        display: none !important;
    }
}