.contact-banner{

    width: 100vw;
    height: 50vh;
    background-color: rgba(0, 0, 0, 0.884);
    display: flex;
    justify-content: center;
    align-items: center;
   }
   
   .contact-img{
       width: 50%;
       height: 50vh;
       background-image:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('../img/blog.jpg');
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
   }
   
   .contact-text{
       width: 50%;
       height: 50vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items:center;
       color:white;
        background-color:#ff7f00;
       font-family:Verdana, Geneva, Tahoma, sans-serif;
   }

   .contact-text h1{
        font-size: 4rem;
        margin-bottom: 2rem;
   }
   
   .contact-text p{
       margin-bottom: 2.5rem;
       text-align: justify;
       width: 50%;
       font-size:17px;
   }

   .blog-text{
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
     margin-top: 3rem;
   }
   .cat-nav{
       margin: auto;
       margin-top: 3rem;
       width: 80%;
    
   }
   .cat-nav ul {
       display: flex;
       justify-content: center;
       align-items: center;
        flex-wrap: wrap;
       font-family: "Raleway", sans-serif;
    
   }

   .cat-nav ul li{
      list-style: none;
       padding:10px;
       margin: 10px 5px;
       text-align: center;
       font-size: 17px;
       font-weight: bolder;
   }

   .cat-nav ul li a{
    padding:10px;
    color:black;
      transition: all 0.3s ease-in-out;
       
   }
   .cat-nav ul li a:hover{
    
    background-color: #2E3192;
    color:white !important;
   }
   .active{ 
     
       background-color: #2E3192;
       color:white !important;
   }
   .entry-title a{
    color: black;
    text-transform: uppercase;
    font-weight: bolder;
  }
  
  .entry-title a:hover{
      color:#ff7f00;
  }

  .main{
      
    transition: opacity 2s ease-in-out;
  }


  .single-blog-banner{
    width: 100%;
    height: 49vh;
    background-color: #ff7f00;
    display: flex;
    flex-direction: column;
    justify-content: center;

    
  }

  .single-blog-banner-content{
  
      width: 50%;
      margin-left: 7rem;
      
   
  }

  
@media screen and (max-width:550px){
    .contact-banner{
        display: flex;
        flex-direction: column;
       
       }
       .contact-img{
       display: none;
    }
    
    .contact-text{
        width: 100%;
        
    }
    .single-blog-banner h1{
        font-size: 1.5rem !important;
    }
  
  }

  @media screen and (max-width:375px){
   
    .single-blog-banner h1{
        font-size: 1rem !important;
    }
  
  }