.hero-section:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .15);
z-index: 1;
}
.hero-section {
position: relative;       
background-image: url(./assets/severs_baner.png);
background-size: cover;
background-position: 50%;
height: 40vh;
color: #fff;
display: flex;
align-items: center;
justify-content: center;        
}

.hero-section h1 {
position: relative;
z-index: 2;
text-shadow: 5px 5px skyblue;
font-size: 4rem;
margin-bottom: 1rem;
}

.blog-heading{
    font-size: 2.75rem;
    color: var(--first-color);
}
.blog-poing{
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--first-color);
}

        .title-color{

            color: var(--first-color);
        }
      .blog-btn{
            margin: 10px 0;
        }
        .blog-btn a{
            background: var(--first-color);
            color: #fff;
        }
        .blog-btn:hover a{
            background: #34dbe0;
            color: #000;
        }

        .serviceCard {
            padding: 20px;
            box-shadow:  5px 15px 20px rgba(0, 0, 0, .2);
            border-radius: 20px;
            margin: 10px;
        }

        .serviceCard  img {
            filter: grayscale(0%);
            transition: .5s ease-in;
        }
        .serviceCard:hover img {
            filter: grayscale(100%);
        }

        .contact-baner{
            background-image: url(./assets/contact-bg.jpg) ;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            /* padding: 3.125rem; */
            position: relative;
            height: 300px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            overflow: hidden;
        }