.banner {
    background: linear-gradient( 150deg, rgba(26, 124, 223, 0.801), rgba(17, 3, 78, 0.774)), url(../img/bg-1.jpg);
    background-size: cover;
    max-height: 80vh;
    padding-top: 110px;
    padding-bottom: 75px;
}

.services {
    background: linear-gradient( 150deg, rgba(246, 150, 24, 0.801), rgba(255, 95, 2, 0.774)), url(../img/bg-1.jpg);
    background-size: cover;
    background-position: bottom;
}

.banner-right {
    clip-path: polygon(13% 0, 100% 0%, 100% 100%, 0 100%);
    height: 100%;
}

.circled {
    /* clip-path: circle(39.4% at 50% 50%); */
    background: #fff;
    width: 450px;
    height: 450px;
    border-radius: 50%;
}

.circle-shadow {
    -webkit-box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.43);
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.897);
}

.banner-button {
    display: inline-block;
    text-decoration: none;
    background: #fff;
    color: #111;
    padding: .5em 1.5em;
    margin-top: 1em;
    border-radius: 3px;
}

.banner-button:hover {
    background: lightblue;
    color: rgb(19, 13, 2);
    text-decoration: none;
}

.header-hidden {
    display: none;
}

.clip {
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 100%);
}

.clip-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%);
}

.services a {
    text-decoration: none;
    color: #111;
}

.services a:hover {
    background: linear-gradient( 150deg, rgba(60, 196, 238, 0.801), rgba(34, 134, 248, 0.774)), url(../img/bg-1.jpg);
    background-position: center;
    color: #fff;
    border: 0px!important;
}

.services a:hover img {
    filter: brightness(0) invert(1);
}

.services p {
    margin-top: 1em;
}

.hover-effect:hover .hover {
    background: rgb(241, 58, 58);
    color: #fff;
    text-decoration: none;
    border: 0;
}

.hover-effect:hover img {
    /* filter: grayscale(1); */
    opacity: .5;
    filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.none-dec {
    text-decoration: none!important;
}

@media(max-width:750px) {
    .hover-effect .hover {
        background: rgb(241, 58, 58);
        color: #fff;
        padding: 1em;
    }
    .hover-effect img {
        height: 200px;
    }
    .shop img {
        width: 100px;
    }
    .navbar-brand img {
        width: 80px;
        height: 45px;
    }
    .icon img {
        width: 40px;
    }
    .bh {
        font-size: xx-large;
    }
    .bh {
        font-size: 1.5em;
    }
    .banner {
        padding-top: 90px;
        padding-bottom: 20px;
    }
    .banner-text {
        text-align: center;
    }
    .banner-text h2 {
        font-size: 1.8em;
        font-weight: bold;
    }
    .banner-button {
        padding: .3em 1.3em;
    }
    .services {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important;
        background: none !important;
        /* margin: 0px !important; */
    }
}