.inner-banner { background: linear-gradient(180deg, rgba(1, 136, 217, 0.31) 0%,
    rgba(255, 255, 255, 1) 100%), url('../img/Homepage/blue_dot_small.svg');  
    background-size: cover, 160px;  background-repeat: no-repeat, no-repeat;
    background-position: center, bottom 0px left -40px; }


.blog-container{ display: flex; width: 100%; justify-content: space-between; padding-bottom: 30px; }
.blog-container .left-section{ display: flex; width:calc(100% - 390px); flex-wrap: wrap;}
.blog-container .blog-rows{display: blog; width: 100%; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); border-radius: 7px 7px 0 0; margin-bottom: 50px; position: relative; overflow: hidden; }
.blog-container .blog-rows .img-wrap{width: 100%; display: block; background:var(--black); overflow: hidden;}
.blog-container .blog-rows .img-wrap img{width: 100%; display: block; transition: all ease-in-out 0.2s; opacity: 0.8;}
.blog-container .blog-rows .img-wrap:hover img{transform: scale(1.1); opacity:1;}
.blog-container .blog-rows .content-wrap {width: 100%; display: block; padding: 20px 30px 30px;}
.blog-container .blog-rows .content-wrap h3{ font-size: var(--fontSize32); font-weight: 500;}
.blog-container .blog-rows .content-wrap ul.date-place { display: flex; width: 100%;  flex-wrap: wrap;  padding: 5px 0 0; margin-bottom: 15px; justify-content: space-between; }
.blog-container .blog-rows .content-wrap ul.date-place li { display: flex;  align-items: center;
font-weight: 500;  font-size: var(--fontSize16);  color: var(--col999999); gap: 5px; flex-wrap: wrap; }
.blog-container .blog-rows .content-wrap ul.date-place li a{ color: var(--col999999);  font-size: var(--fontSize16); white-space:nowrap;}

.blog-container .blog-rows .content-wrap ul.date-place li i{ color: var(--blue); margin-right: 5px;}
.blog-container .blog-rows .social-icon2{ padding: 0 0 20px;  margin: 0; width: auto; justify-content: flex-start; }
.blog-container .blog-rows .social-icon2 li{ display: flex; justify-content: center; align-items: center;  margin: 0 10px 0 0; width: 24px; height: 24px;  border-radius: 6px; background: var(-white);   }
.blog-container .blog-rows .social-icon2 li a{color:#B6B6B6; border-color:#B6B6B6; font-size: var(--fontSize16  );  }
.blog-container .blog-rows p{ font-size: var(--fontSize16); font-weight: 400;}
.blog-container .blog-rows .blog-logo{ position: absolute; left: 20px; top: 20px; max-width: 142px;}


.blog-container .right-section{ display: block; width: 100%; max-width: 360px; position: relative; }
.blog-container .right-section h3{ display: block; width: 100%; font-size: var(--fontSize20); background: var(--blue); color: var(--white); padding: 10px 20px; border-radius: 50px;}
.blog-container .right-section h3 i{ margin-right: 10px; }

.blog-container .categories { display: block; width: 100%; margin-bottom: 50px; background: var(--lightblue); padding: 20px; border-radius: 10px;}
.blog-container .categories ul{ padding: 0 10px 0;}
.blog-container .categories ul li{ display: block; padding: 0;  border-bottom:solid 1px var(--lightgrey1); }
.blog-container .categories ul li a{ display: block; width: 100%; padding: 8px 0;color: var(--lightblack); transition: all ease-in-out 0.2s;}
.blog-container .categories ul li a:hover{ color: var(--blue); transform: translateX(10px);  }


.blog-container .join-comunity { display: block; width: 100%; margin-bottom: 50px; border: solid 1px var(--lightgrey1); padding: 0 0px 20px; border-radius: 20px 20px 0 0;}
.blog-container .join-comunity .search-wrap{ display: block; width: 100%; padding:0 15px 5px;}
.blog-container .join-comunity .search-sec { width: 100%; position: relative; padding: 5px;  box-shadow: 0 0px 10px rgba(0,0,0,0.1);  border-radius: 10px;  margin-top: 20px; border: solid 1px var(--lightgrey1); position: relative;}
.blog-container .join-comunity .search-sec input[type="text"] { width: 100%;  background: var(--white);   border: none;  height: 30px; border-radius: 16px;   font-size: var(--fontSize16); color: var(--darkblue);
margin-bottom: 0; padding: 18px 43px 18px 13px;  }

.blog-container .join-comunity .search-sec input[type="submit"] { display: block;   width: 48px;  background:var(--blue); border: none;   height: 100%;  margin-bottom: 0; position: absolute;  right: 0px;
top: 0px;  border-radius:0 10px 10px 0; color: var(--white);  cursor: pointer;  }


.popular-recent{ display: block; width: 100%; margin-bottom: 50px; background: var(--lightblue); padding: 0 0px 20px; border-radius: 10px; overflow: hidden; }
.popular-recent .tabs{display: flex; width: 100%; justify-content: space-between; }
.popular-recent .tabs .tab{display: flex; background: var(--blue); width: 50%; justify-content: center; color: var(--white); padding:8px 8px; font-size: var(--fontSize16);  }

.popular-recent .tabs .tab:hover, .popular-recent .tabs .tab.active{ background: var(--darkblue);}

.popular-recent ul{ display: none; width: 100%; padding: 10px 20px 0px;}
.popular-recent ul li{ display: flex; width: 100%; padding: 15px 0; align-items: flex-start;}

.popular-recent ul li img{ background: var(--black); opacity: 0.8; object-fit: cover; max-width: 94px; height:88px; border-radius: 10px; overflow: hidden; width: 100%;}

.popular-recent ul li a{ display: flex; width: 100%; align-items: flex-start;}
.popular-recent ul li p{display: flex; width: 100%; font-size: var(--fontSize14); padding:0 0 0 10px; justify-content: space-between; margin-bottom: 0px;}
.popular-recent ul li p span{font-size: var(--fontSize12); color: var(--lightblack);}
.popular-recent ul li h4{font-size: var(--fontSize16); padding: 0 0 0 10px; margin-top: 10px;}

.popular-recent ul li:hover a{ color: var(--blue);}
.popular-recent ul li:hover a p span{ color: var(--blue);}
.popular-recent ul li:hover img{ opacity: 1;}

.pin { position: absolute;  top: 310px;right:0px; }
.pin-wrapper{top: 0px; float: left; }

@media only screen and (max-width:1199px) {
.blog-container .left-section{  width:calc(100% - 330px); }
.blog-container .right-section{max-width: 300px; }


}

@media only screen and (max-width:1023px) {
.blog-container  {flex-wrap: wrap;}
.blog-container .blog-rows .content-wrap{ padding: 15px 20px 20px;}
.blog-container .left-section, .blog-container .right-section{ width:100%; max-width:100% }
.blog-container .blog-rows .content-wrap h3{font-size: var(--fontSize28);}
.blog-container .right-section ul li a div{ display: block; width: 100%;}
.blog-container .blog-rows, .blog-container .join-comunity, .blog-container .categories{ margin-bottom: 30px;}
.popular-recent{ margin-bottom: 0px; padding-bottom: 0;}
}

@media only screen and (max-width:767px) {
    .blog-container .blog-rows .content-wrap ul.date-place{ margin: 0 0 15px 0; padding-top: 0;}
    .blog-container .blog-rows .content-wrap ul.date-place li{flex:auto; width: 50%; margin-bottom: 0;}
}

@media only screen and (max-width:479px) {
    .blog-container .blog-rows .content-wrap ul.date-place li{width: 100%; }
    .popular-recent ul li img{ width: 60px;     height: 46px;}
}