@media screen and (max-width: 930px) {
    .navigation{
        flex-direction: column;
        margin-bottom: 23px;
        height: 100%;
    }
    .nav-left{
        /* display: flex; */
        flex-direction: column;
        text-align: center;
    }
    .nav-right{
        /* display: flex; */
        flex-direction: column;
        text-align: center;
    }

.content-right img {
display: none;
}

.content-left h3 {
    margin-bottom: 12px;
    font-family: var(--font1);
    font-size: 50px;
}
.home-article-content {
   
    margin-left: 25px;
}
.nav-left span {
    /* margin-top: 14px; */
    margin: 20px;
    font-size: 37px;
}
.form-input {
    width: 50%;
    padding: 4px 9px;
    font-family: var(--font1);
    margin: 0px 5px;
    border: 2px solid black;
    border-radius: 4px;
    font-size: 12px;
}
.heading img{
 
    width: auto;
}

}

@media screen and (max-width: 558px) {


    .home-article{
        display: flex;
       margin: 25px;
       flex-direction: column;
    
        
    }
.home-article img {
    width: 200px;
    text-align: center;
}

.home-article-content {
   display: block;
    margin-left: 25px;
}
.content-left h3 {
    margin-bottom: 12px;
    font-family: var(--font1);
    font-size: 39px;
}


.heading h1{
 
    font-size: 20px;
}




}




/* width 435 */

@media screen and (max-width: 435px) {
   
        .main-container {
            background-color:var(--main-bg-color);
        }
        .nav-left ul li a {
          
            font-size: 12px;
        }
        .form-input {
            width: 30%;
            
        }
        .content-left h3 {
            margin-bottom: 12px;
            font-family: var(--font1);
            font-size: 22px;
        }
        .nav-left span {
            /* margin-top: 14px; */
            margin: 20px;
            font-size: 22px;
        }
    
    .content-left p {
        font-family: var(--font2);
        font-size: 11px;
        opacity: 0.8;
    
    }
    .home-articles h2 {
        font-family: var(--font1);
        font-weight: bolder;
        font-size: 19px;
        margin-top: 7px;
        margin-bottom: 7px;
    }
  .heading span {
       
        font-size: 12px;
    }

    .footer{
        background-color:var(--main-bg-color);
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        color:black;
        font-family: var(--font1);
        font-weight: bolder;
        font-size: 10px;
        
    
    }

   


}