@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
:root {
  --bodyclr: #333;
  --pcolor: #464343;
  --ahover: #e12454;
  --topheaderbg: #ebf5f5;
  --htmlbody: #333;
  --heading1: #e12454;
  --bgcolor: #e12454;
  --btnafter: #b3183f;
  --whitecolor: #fff;
  --color: #fff;
  --inputcolorbg: #e43662;
  --btnhovertext: #fff;
  --btn_bordercolor: #ffd9db;
  --form-control: #b8bbb5;
  --bgsecond: #414042;
  --btnpage2: #004274;
  --hovertype: #fa0e68;
  --aboutbg: #f4f6fa;
  --hoversection: #ff6ca3;
  --btnoutline: #aaa;
  --blogbg: #f4f6fa;
  --blogborder: #ffa5bc;
  /* font family */
  --primaryfont: "Lato", sans-serif;
}

body,
a,
div,
span,
li {
  color: var(--bodyclr);
}

p {
  font-family: var(--primaryfont);
  color: var(--pcolor);
}

a {
  text-decoration: none;
  transition: all 0.5s;
}

a:hover {
  text-decoration: none;
  outline: none;
  transition: all 0.5s;
  color: var(--ahover);
}

a:focus {
  text-decoration: none;
  outline: none;
  transition: all 0.5s;
  color: var(--ahover);
}

.main-heading {
  font-size: 3.438rem;
}

.sub_heading {
  font-size: 1.375rem;
}

.blog-details-page-fix-first {
  margin-top: 18px;
}

.blog-details-page-fix {
  position: sticky;
  top: 0%;
}

.blog-details-page-fix .blog-box {
  border: none !important;
  margin-top: 0;
  border-radius: 5px;
  margin-top: 50px;
}

.blog-details-page-fix .blog-box .img-icon-set {
  height: 425px;
  position: relative;
}

.blog-details-page-fix .blog-box .img-icon-set img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--btn_bordercolor);
}

.blog-details-page-fix .blog-box .img-icon p {
  left: 30px;
  width: 65px;
  height: 65px;
  position: absolute;
  font-size: 1.25rem;
  padding-top: 7px;
  bottom: -10px;
  z-index: 1;
  background-color: var(--ahover);
  color: var(--color);
}

.blog-details-page-fix .blog-box .blog-content {
  padding: 30px;
  background-color: var(--topheaderbg);
  padding-bottom: 30px !important;
  border-radius: 0;
}

.blog-details-page-fix .blog-box .blog-content h3 {
  text-align: left;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 35px;
}

.blog-details-page-fix .blog-box .blog-content ul {
  display: flex;
  padding-bottom: 10px;
  padding-top: 5px;
  border-bottom: 1px solid #e9e9e9;
}

.blog-details-page-fix .blog-box .blog-content ul li {
  padding-right: 20px;
}

.blog-details-page-fix .blog-box .blog-content ul li i {
  padding-right: 3px;
  color: var(--ahover);
}

.blog-details-page-fix .blog-box .blog-content p {
  text-align: left;
  margin-top: 10px;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #d4d4d4;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .blog-details-tags-set {
  width: 60px;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .fa-tag {
  color: var(--ahover);
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .tag-buttons {
  padding: 0px;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .tag-buttons li a {
  background: var(--color);
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  transition: all 0.5s;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .tag-buttons li a:hover {
  background-color: var(--ahover);
  color: var(--color);
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul {
  border-bottom: none;
  padding: 0;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul li {
  padding: 0 !important;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul li a {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  display: inline-block;
  line-height: 36px;
  border-radius: 50%;
  border: 1px solid #444;
  margin-right: 20px;
  transition: all 0.5s;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul li a:hover {
  background-color: var(--ahover);
  border-color: var(--ahover);
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul li a i {
  color: #222222;
  transition: all 0.5s;
  margin-top: 11px;
  padding: 0 !important;
}

.blog-details-page-fix .blog-box .blog-content .tag-with-media .social ul li a:hover i {
  color: var(--color);
}

@media (max-width: 1199px) {
  .blog-page-main-container .blog-single-main-page .blog-box .blog-content .tag-with-media .tag-buttons li {
    padding: 2px !important;
  }
}
@media (max-width: 767px) {
  .blog-page-main-container .blog-single-main-page .blog-box .blog-content .tag-with-media .social {
    margin-top: 30px;
  }
}
.search-keyword {
  margin-top: 50px;
  background-color: var(--topheaderbg);
}

.search-keyword h6 {
  padding: 13px 30px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 1.375rem;
  background-color: var(--ahover);
  color: var(--color);
}

.search-keyword .bgsearch {
  padding: 30px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
}

.search-keyword .bgsearch .input-group input {
  height: 50px;
}

.search-keyword .bgsearch .input-group span {
  height: 100%;
  padding: 15px 25px;
  background: var(--ahover);
  border: none;
  color: var(--color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0px;
}

.search-keyword .bgsearch .input-group span span:hover {
  background-color: var(--btnafter);
}

.recent-post {
  margin-top: 33px;
  background-color: var(--topheaderbg);
}

.recent-post h6 {
  padding: 13px 30px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 1.375rem;
  background-color: var(--ahover);
  color: var(--color);
}

.recent-post .bgrecent {
  padding: 30px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
}

.recent-post .bgrecent .post-main-container {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}

.recent-post .bgrecent .post-main-container.hr-line {
  position: relative;
}

.recent-post .bgrecent .post-main-container.hr-line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -25px;
  width: 100%;
  border-top: 1px solid #d4d4d4;
}

.recent-post .bgrecent .post-image {
  height: 90px;
  width: 90px;
  background-color: var(--ahover);
}

.recent-post .bgrecent .post-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: var(--ahover);
}

.recent-post .bgrecent .h6 {
  font-size: 1rem;
}

.recent-post .post-container a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-post .bgrecent .post-main-container .post-container p {
  margin-top: 7px;
  font-size: 0.875rem;
}

.blog-categories {
  margin-top: 33px;
  background-color: var(--topheaderbg);
}

.blog-categories h6 {
  padding: 13px 30px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 1.375rem;
  background-color: var(--ahover);
  color: var(--color);
}

.blog-categories .bgcategories {
  padding: 30px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
}

.blog-categories .bgcategories .categories li {
  line-height: 35px;
  width: 100%;
}

.blog-categories .bgcategories .blog-list-group-item i {
  color: var(--ahover);
  padding-top: 12px !important;
}

.blog-categories .bgcategories .categories li span {
  color: var(--ahover);
  margin-right: 15px;
}

.tags-section {
  margin-top: 33px;
  background-color: var(--topheaderbg);
}

.tags-section h6 {
  padding: 13px 30px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 1.375rem;
  background-color: var(--ahover);
  color: var(--color);
}

.tags-section .bgtags {
  padding: 30px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  position: relative;
}

.tags-section .bgtags .tags {
  flex-wrap: wrap;
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.tags-section .bgtags .tags {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.tags-section .bgtags .tags li {
  float: left;
}

.tags-section .bgtags .tags li a {
  background-color: var(--color);
  margin-bottom: 10px;
  padding: 8px 14px;
  text-align: center;
  display: inline-block;
  border-radius: 7px;
  transition: all 0.5s;
}

.tags-section .bgtags .tags li:hover a {
  background-color: var(--ahover);
  color: var(--color);
}/*# sourceMappingURL=blog-detailDesign3.css.map */