/*===== Common =====*/

.center{    text-align: center;
    display: flex;
    justify-content: center;}

.list-styling-button{list-style: none;
    display: flex; flex-wrap: wrap;
    column-gap: 1em;
    width: 100%;
    justify-content: center;
    align-items: center;}
.list-styling-button li{    border: 1px solid black;
    background: black;
    color: white;
    border-radius: 20px;
    padding: 2px 20px;}
.list-styling-button li a{    color: white; text-decoration:none;}


.list-styling-bullet-slider{list-style-type: none;
  margin: 0;
  padding: 0;}
.list-styling-bullet-slider li{background: url(https://cdn-icons-png.flaticon.com/512/106/106810.png) no-repeat left top;
  background-size: 26px 25px;
  padding-left: 40px;
  margin-bottom: 15px;}
/*===== Blogpost =====*/
.article-container{font-size: 18px;}
.blog-content>section{width:100%;font-size: 18px;}
.blog-content img {
width:100%; margin:30px auto 15px auto;
-webkit-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
-moz-box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
box-shadow: 1px 1px 10px 1px rgb(164, 152, 152);
}

.blog-content .banner{width:100%;}
.post-meta-info{}

.blog-content p{margin: 15px 0 15px 0;}
.blog-content ul,ol{margin: 20px 30px 20px 60px;}

.blog-content>ul {
   list-style: none;
   counter-reset: item;
 }
.blogpost-head{    margin: auto auto 2em auto;
    display: flex;
    flex-direction: column;
}

.text-image-container p{text-align: justify;}

.text-image-container .img-fr{width:35%;float:right;margin:auto auto 1em 2em;}
.text-image-container .img-lr{width:35%;float:left;margin:auto 2em 1em auto;}

/*===== Blog Home Page =====*/
.featured_blog_post{width:100%;margin:1em auto;box-shadow: black 0px 0px 10px;}
.featured_blog_post img {width:100%;}
.featured_blog_post h2 {font-weight: 600;margin-top:0.5em;margin: 0.5em 0.5em 0.5em 1em;}
.featured_blog_post h2 a{text-decoration: none; color:black;}
.recent_blogpost_container{display:flex;column-gap: 2em;margin:1em auto;flex-wrap: wrap;
    row-gap: 2em;}
.recent_blog_post{width:48%;display:flex;flex-direction:column;box-shadow: black 0px 0px 2px;}
.recent_blog_post h2 {font-size:20px;margin-top:0.5em;font-weight: 500;margin: 0.5em 0.5em 0.5em 1em;}
.recent_blog_post h2 a {text-decoration: none; color:black;}
.recent_blog_post img {width:100%;}

.blog-user-input{display:none;}

.comment-container{display:flex; justify-content: center; padding:2em 1em 2em 1em;}
.vote-container{display:flex;column-gap: 1em;justify-content: center;}

.input-container{display:flex;justify-content: center;margin: 2em auto;}
.input-container .show-message{display:none;}
.input-container .get-feedback{display:none;}

.get-feedback form textarea{width:500px; border:1px solid black;}

#blog-feedback-tabs{display:flex;text-align: center; justify-content: center; column-gap: 1em;}

#blog-feedback i {font-size:35px;}
.fa-solid{cursor:pointer;}
#blog-feedback .fa-thumbs-up{position:relative;}
#blog-feedback .fa-thumbs-down{position:relative;top:7px;}
.ask-question, .user-feedback{display:flex;text-align: center; justify-content: center; flex-direction: column;}
#blog-ask-question textarea{width: 500px;border: 1px solid black;margin: 1em auto 1em auto;}

@media screen and (min-device-width: 350px) and (max-device-width: 600px)
{
.article-container {font-size: 15px;}
.blog-content>section{width:100%;font-size: 17px;}
.blog-content h1{font-size:25px;}
.blog-content h2{font-size:20px;margin-bottom:1em;text-align: center;}
.blog-content>section:first-child>div{padding:0em;}


.blog-content p{text-align: justify;}
.text-image-container .img-fr{width:100%;margin:1em auto;}
.text-image-container .img-lr{width:100%;margin:1em auto;}
.post-meta-info{margin-bottom:1em;font-size: 14px;}
.post-meta-info i{font-size: 14px;}
.blogpost-head{display:flex;text-align:center;}
.blogpost-head h1{margin-top:0em;}

.recent_blog_post {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: black 0px 0px 2px;
}

#blog-ask-question textarea{width: 350px;height: 100px; margin-bottom: 1em;}
.get-feedback form textarea{width:350px;height: 100px; margin-bottom: 1em;}
}