.hajj-header {
    background-image: url('img/hajj-logo.png'); 
    background-repeat: no-repeat;  
    background-size: auto 100%;
    background-position: center;
    height: 15vi;
    position: relative;
    isolation: isolate;
}

.hajj-header::after {
    content:'';
    position: absolute;
    background: rgb(233,247,255);
    z-index: -1;
    inset:0;
    opacity: .77;
}

.hajj-content{
    background-image: url('img/hajj-content-bg.png'); 

}

.hajj-title {
    font-weight: bold;
    text-align: center;
}

.hajj-sub-title {
    text-align: center; 
    color: rgb(207,163,74);
    font-weight: bold;
}


@media only screen and (min-width: 900px) {
    .hajj-title {
        font-size: 4em; 
    }
    
    .hajj-sub-title {
        font-size: 2.75em; 
    }
    
    .hajj-h1{
        font-size: 3em;
    }
    
    .hajj-h4{
        font-size: 2em; 
    }
  }

@media only screen and (min-width: 600px) and (max-width: 900px) {
    .hajj-title {
        font-size: 2.75em; 
    }
    
    .hajj-sub-title {
        font-size: 1.75em; 
    }
    
    .hajj-h1{
        font-size: 2.75em;
    }
    
    .hajj-h4{
        font-size: 1.75em; 
    }
  }

@media only screen and (min-width: 400px) and (max-width: 600px) {
    .hajj-title {
        font-size: 2em; 
    }
    
    .hajj-sub-title {
        font-size: 1em; 
    }
    
    .hajj-h1{
        font-size: 2em;
    }
    
    .hajj-h4{
        font-size: 1.5em; 
    }
  }

@media only screen and (max-width: 400px) {
    .hajj-title {
        font-size: 1em; 
    }
    
    .hajj-sub-title {
        font-size: .75em; 
    }
    
    .hajj-h1{
        font-size: 1em;
    }
    
    .hajj-h4{
        font-size: 1em; 
    }
  }