@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');

body {

    font-family: 'Quicksand', sans-serif;
    background-color: #f0f0fa;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;


    }
.mb-page-main-main-wrapper{
    display: none;
}
.page-main-wrapper{

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;


}

.page-nav-wrapper{

        display: flex;
        width: 100%;
        height: 50px;
        background-color:#564e8d;
        position: sticky;
        top: 0;
        z-index: 1;

}
.logo{

    display:flex;
    flex:1;
    float: left;
    margin-left: 20px;
    align-items: center;
    font-size: 20px;
    color: #ffffff;


}
.nav-bar{

    display: flex;
    flex:1;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
    margin-right: 20px;
    color: #ffffff;

}
.page-content-wrapper{

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 50px;
    

}
.page-main-content{
    display: flex;
    flex-direction: column;
    width: 800px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 30px;
    line-height: 1.6;
    font-size: 17px;
    position: relative;


  
}
.blog-heading{
    
float: left;
position: relative;
width: 100%;
line-height: 0.5;

}
.card-time{
            
            
    display: flex;
    color: #564e8d;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 20px;
    background-color:#f2f2f2;
    color: black;
    border-radius: 5px;
    padding: 5px;


}

.sub-div{
    display: flex;
    width: 100%;
    gap: 10px;

    
}
.sub-div-one{
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 5px;
    align-items: center;

}
.sub-div-two{
    display: flex;
    align-items: center;
    flex: 1;
    justify-content:flex-end;
    gap: 5px;

}
p4{
 
    justify-content: flex-start;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 10px;

}
p{
    margin-left: 10px;
    margin-right: 10px;
}
.blog-image{
position: relative;
}
.blog-img-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.show-code{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
    height: auto;
    background-color: black;
    border-radius: 7px;
    color: white;
}
@media only screen and (max-width: 890px) {

body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    width: 100%;
  
}

.page-main-wrapper{
    display: none;

   
    
}
.page-content-wrapper{
    display: none;

}
.mb-page-content-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;

}
.mb-page-main-main-wrapper{

    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    
}

.mb-nav-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    height:auto


}
.mb-page-content-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;

}
.mb-page-main-wrapper{
    display: flex;
    background-color: white;
    width: 100%;
    flex-direction: column;
    align-items: center;

    position: relative;

    
}

.mb-res-navbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    background-color: #564e8d;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
   
}

.mb-page-nav-wrapper{
    display:flex;
    background-color: #564e8d;
    width: 100%;
    height: 50px;
    align-items: center;
   


}
.mb-menu{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
 

}
.mb-logo{
    display:flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    flex: 1;

}
.mb-blog-heading{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    line-height: 0.5;  
    margin-top: 10px;  
    margin-bottom: 30px;


}
.mb-blog-topic-heading{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    line-height: 1.0;  
}
.mb-sub-div{
    display: flex;
    flex-direction: column;
    gap:0px;


}
.mb-sub-div-one{
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: 30px;
}
.mb-sub-div-two{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}
.mb-blog-image{
    width: 100%;
    height: auto;
}
.mb-blog-img-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

}