@media (max-width: 1200px) {
    
    .landing-img .img-container {
        width: 280px;
        height: 415px;

    }


    .shape1 {
        width: 85px;
        height: 85px;
        right: -42.5px;
    }

    .shape2 {
        width: 75px;
        height: 75px;
        left: -32.5px
    }
    .article-info,
    .all-article-info,
    .aside-item-text{
    padding: 10px 18px;
    }
    
}

@media (max-width: 1024px) {

    .landing .main-container .land-container {
        display: grid
    ;
        grid-template-columns: 1fr 1fr;

    }
    .landing-img .img-container {
        width: 270px;
        height:380px;

    }

    


    .shape1 {
        width: 90px;
        height: 90px;
        right: -45px;
    }

    .shape2 {
        width: 75px;
        height: 75px;
        left: -35px
    }
    

    .landing-content h1{
        font-size: 45px;
    }

    

}

@media (max-width: 992px) {


    .articles-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat( 2, auto);
        gap: 20px;
      }
    .article:nth-child(1){
 
        grid-row: 1/2;
        grid-column: 1/3;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      
      
      .article:nth-child(2){
        grid-row: 2/3;
        grid-column: 1/2;
      }
      
      .article:nth-child(3){
        grid-row: 2/3;
        grid-column: 2/3;
      }


}

@media (max-width: 768px) {

    .landing {
        margin-top: 60px;
    }

    .landing-content h1{
        font-size: 40px;
        text-align: center;
    }

    .landing-content p {
        font-size: 18px;
        text-align: center;
    }

    
  
    .landing .main-container .land-container{
        display: grid;
        grid-template-columns:  1fr;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    
    }
    
    .landing-content{
        grid-column: 1 / span 1  ;
        grid-row: 2 / span 1;
        
    }
    
    .contact {
        margin: 70px 0 50px 0;
    }

    .contact-container{
        display: flex;
        gap: 40px;
        flex-direction: column;
    }

    .group-form{
        flex-direction: column;
        width: 100%;
    }
    .group-form input {
        width: 100%;
        padding: 0;
        padding-right: 10px;
        
    }
    .contact-form input, textarea{
        font-size: 14px ;
    }

    

    .whatsapp-option{
        width: 50px;
        height: 50px;
    }



    .articles-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat( 3, auto);
        row-gap: 20px;
        column-gap: 0px;
    }
    .article:nth-child(1){
 
        grid-row: 1/span 1;
        grid-column: 1/ span 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      
      
      .article:nth-child(2){
        grid-row: 2/ span 1;
        grid-column: 1/  span 1;
      }
      
      .article:nth-child(3){
        grid-row: 3/ span 1;
        grid-column: 1/ span 1;
      }
}

@media (max-width: 550px) { 

    .landing-img .img-container {
        width: 300px;
        height: 435px;

    }


    .shape1 {
        width: 100px;
        height: 100px;
        right: -50px;
    }

    .shape2 {
        width: 90px;
        height: 90px;
        left: -45px
    }
    .contact-link {
        width: fit-content;
        height: 48px;
        font-size: 16px;
        font-weight: bold;
    }

    .whatsapp-option{
        width: 45px;
        height: 45px;
    }

    .page-header h1{
        font-size: 40px;
    }
    .article:nth-child(1) h2,
    .all-article-info h2,
    .article-header,
    .network-info h2,
    .aside-header h2,
.aside-item-text h2,
.article-details-header h2{
        font-size: 20px;
    }

    .article:nth-child(2) h2, .article:nth-child(3) h2,
    .network-info p,
    .article-details-text p,
.aside-item-text p{
        font-size: 16px;
    }
    .article p,
    .all-article-info p{
        font-size: 14px;
        margin: 0;
    }

    .article-date p,
    .info-date p,
    .aside-item-date p{
        font-size: 12px;
    }
    .network-img{
        height: 160px;
    }
    .network-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-info,
.all-article-info,
.aside-item-text{
  padding: 0 15px;
}
}



@media (max-width: 425px) {

    .landing-img .img-container {
        width: 280px;
        height: 415px;

    }


    .shape1 {
        width: 85px;
        height: 85px;
        right: -42.5px;
    }

    .shape2 {
        width: 75px;
        height: 75px;
        left: -32.5px
    }
    .contact-link {
        width: fit-content;
        height: 48px;
        font-size: 14px;
        font-weight: bold;


    }

    .whatsapp-option{
        width: 40px;
        height: 40px;
    }

    .network-img{
        height: 130px;
    }

    .article-info,
.all-article-info,
.aside-item-text{
  padding: 10px;
}
    
.details-page{
    margin: 20px 0;
  }
}

@media (max-width: 375px) {


    .landing-img .img-container {
        width: 240px;
        height: 370px;

    }


    .shape1 {
        width: 85px;
        height: 85px;
        right: -42.5px;
    }

    .shape2 {
        width: 70px;
        height: 70px;
        left: -35px
    }
    .contact-link {
        width: fit-content;
        height: 48px;
        font-size: 13px;
        font-weight: bold;
    }

    .header-links a{
        
        font-size: 12px;
        
    }

    .logo p{
        font-size: 14px;
    }

    .page-header h1{
        font-size: 30px;
    }
    .article:nth-child(1) h2,
    .all-article-info h2,
    
    .article-header,
    .network-info h2,
    .aside-header h2,
.aside-item-text h2,
.article-details-header h2{
        font-size: 18px;
    }

    .article:nth-child(2) h2, .article:nth-child(3) h2,
    .network-info p,
    .article-details-text p,
.aside-item-text p{
        font-size: 14px;
    }
    .article p,
    .all-article-info p{
        font-size: 12px;
        margin: 0;
    }

    .article-date p,
    .info-date p,
    .aside-item-date p{
        font-size: 10px;
    }



    .all-article-info h2{

        font-family: "Inter-Bold";
      
      }
     
      

}