.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/baner_bg.png);
    background-size: cover;
    background-position: 50%;
    height: 40vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;        
    }
    
    .hero-section h1 {
    position: relative;
    color: var(--first-color);
    z-index: 2;
    text-shadow: 5px 5px skyblue;
    font-size: 4rem;
    margin-bottom: 1rem;
    }
    
    .blog-heading{
        font-size: 1.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;
    }

    
    .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;
    }