.blog-header{
    padding: 15px 30px;
    background-color: #fff;
}

.nav-btn{
    padding: 10px 20px;
    background-color: transparent;
    border: .8px solid #ff5500;
    font-weight: 700;
    color:  #ff5500;
    transition: .3s ease;
}

.small-cards{
    height: 100%;
}


.nav-btn:hover{
    transition: .3s ease;
   background-color:  #ff5500;
    font-weight: 700;
    color:  #ffffff;;
}

.blog-nav{
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.middle-menue{
    list-style: none;
}

.middle-menue>li{
    display:inline-block;
    padding-left: 20px;
}

.select-menue{
    border: none;
    background-color: transparent;
}


.middle-menue>li>a{
text-decoration: none;
color: #000;
transition: .3s ease;
}

.middle-menue>li>:hover{
    
    color: #ff5500;
    transition: .3s ease;
    cursor: pointer;
    }




.end-menue{
    list-style: none;
}

.end-menue>li{
display: inline-block;
padding-left: 20px;

}

.end-menue>li>a{
    color: #000;
    transition: .3s ease;
}


.end-menue>li>a:hover{
    color: #ff5500;
    transition: .3s ease;
}

.logo{
    padding-top: 50px;
    text-align: center;
    cursor: pointer;
}


.bottom-footer{
  
    background-color: #efefef;
    padding: 100px 50px;
    text-align: center;
   
}

.blog-section{
    padding-top: 80px;
    padding-bottom: 80px;
}

.blog-card-body-content{
    padding-left: 20px;
    padding-bottom: 20px;
   
}

.pagination-section{
padding-bottom: 50px;

}


.pagination{
    display: flex;
    justify-content: center;
}

.box1{
    color: #fff;
    background-color: #ff5500;
    padding: 20px;
    margin-left: 20px;
    width: auto;
    border-radius: 5px;
    border: .5px solid #ff5500;
    transition: .2s ease;
}


.box2{
    padding: 20px;
    margin-left: 20px;
    width: auto;
    border-radius: 5px;
    border: .5px solid #ffffff;
}


.box2:hover{
    transition: .2s ease;
    color: #ff5500;
    border: .5px solid #ff5500;
    cursor: pointer;
}

.blog-btn-container{
 display: grid;
   
}

.blog-btn{
    background-color: #fff;
    border: .4px solid #c6c6c6;
    padding: 15px 25px;
    grid-column: span; /*idk what is this*/
}

.dominios{
     transition: .4s ease;
}

.dominios:hover{
    transition: .4s ease;
    color: #ff5500;
    cursor: pointer;
}



/*Header part CSS*/

.res-after-show{
    display:none;
}


.only-phone-view-list{
    display: none;
}

.tot-ul{
    display:flex;
}

.ham{
    display:none;
}

.close-button-panel{
    display: none;
}


.res-magni{
    display: none;
    transition: .3s ease;
    
}


.res-magni:hover{
     color: #ff5500;
    transition: .3s ease;
    cursor: pointer;
}



@media screen and (max-width:1241px) 
{
    
    .blog-nav{
        display: block;
    }
    
    .btn-container{
        display: none;
    }
    
    .end-menue>.magni{
        display: none;
    }
    
    .middle-menue>.hide-select
    {
        display:none;
    }
    
    .res-after-show{
        display: block;
        text-align: center;
        transition: .2s ease;
    }
    
    .res-after-show:hover{
         transition: .2s ease;
         cursor: pointer;
            color: #ff5500;
    }
    
    .tot-ul{
        z-index: 90;
    position: fixed;
        z-index: 100;
        display: block;
        background: #14191e;
        width: 80%;
        height: 80%;
        top:0;
        left:0;
    }
    
    .close-button-panel{
        display: block;
        color: #fff;
        float: right;
        padding-top: 20px;
        padding-right: 20px;
        font-size: 20px;
        font-weight: 900;
         transition: .4s ease;
    }
    
    .close-button-panel:hover{
        transition: .4s ease;
       cursor: pointer;
        color: #ccc;
        transform: translateX(2px);
    }
    
    
    .only-phone-view-list{
          color: #fff;
          
    }
    
    .only-phone-view-list>li{
        transition: .2s ease;
    }
    
      .only-phone-view-list>li:hover{
        transition: .2s ease;
          color: #ff5500;
          cursor:pointer;
    }
    
    
    
    .tot-ul>ul>li>a{
     
        color: #fff;
    }
    
    .tot-ul>ul>li{
        padding-top: 20px;
    }
    
    .middle-menue>li{
        display: block;
       
    }
    
    .end-menue>li{
        display: inline-block;
    }
    
    .only-phone-view-list{
        display: block;
        padding-left: 100px;
    }
    
    .blog-header{
        position: relative;
    }
    
    .logo{
      
        text-align: left;
        z-index: 0;
        position: absolute;
        left: 0;
        padding: 0 0 0 50px;
        margin-top:50px;
        width: 230px;
    }
    
    .ham{
        display: block;
         float: right;
             margin-top: 50px;
             transition: .3s ease;
    }
    
    
    .ham:hover{
       cursor: pointer;
       transform: scale(1.1);
         transition: .3s ease;
    }
    
    .ham>.line{
        width: 25px;
        height: 1px;
        background-color: #ccc;
       margin-top: 4px;
       display: block;
       transition: .3s ease;
       padding-top: 3px;
      
    }
    
    .blog-nav > .tot-ul{
    left:-100%;
    transition: 0.5s ease;
}

.blog-nav > .tot-ul.slide{ /*this class for js when i click ul show*/
            left: 0%;
            transition: 0.5s ease;
            
        }


.res-magni{
    display: block;
    float: right;
    margin-top: 55px;
    padding-right: 20px;
}
    
}





/*end HEader Part CSS*/