@charset "utf-8";
/* CSS Document */


.blog-details .article-content h2 {font-size:1.5rem; line-height: 2rem;}

.blog-details .content a:hover {text-decoration:underline;}


.blog-details .article-content ul {
	list-style-type: disc!important;
  padding-left: 1.5rem;
  margin: 15px 0;
}


.blog-details .article-content ul li::marker {
  color: #ED4A1D;

}

.blog-details .article-content ol > li br {
  content: "";
  display: block;
  margin-bottom: 10px; 
}


.blog-details .article-content ol {
  padding-left: 0 !important;
  margin: 0;
  counter-reset: index;
}

.blog-details .article-content ol > li {
  position: relative;         
  list-style: none;
  margin-bottom: 20px;
  padding-left: 48px;         
  counter-increment: index;
}

.blog-details .article-content ol li:last-of-type {
  margin-bottom: 0 !important;
}

.blog-details .article-content ol li::before {
  content: counter(index, decimal);
  position: absolute;
  left: 0;
  top: 0.15em;        
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: linear-gradient(90deg, #196D96 0%, #5897B6 100%) !important;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


.blog-details .article-content ol li > strong {
  display: inline;  
}


.blog-details .article-content .content .highlight-box {
  background: #e8f5fc;
  border-radius: 12px;
  padding: 2rem;
  margin: 2.5rem 0;
}

.blog-details .article-content .content .lead  br {
  content: "";
  display: block;
  margin-bottom: 10px; 
}

.blog-details .article-content .content .lead {
  font-size: 1.2rem;
  font-weight: 400;
line-height: 1.8rem;
}

.blog-details .article-content .content blockquote::before {
  content: '\201C'; 
  position: absolute;
  top: -40px;
  left: 10px;
  font-size: 8rem;
  color: #28779e;
  font-family: 'Playfair Display', serif; 
  font-style: italic;
  line-height: 1;
}

.blog-details .article-content .content blockquote {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 3rem;
  background: #e8f5fc;;
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.blog-details .article-content .content blockquote p {
  font-size: 1.3rem;
  font-style: italic;
  color: #000;
  margin: 0 0 1rem;
  position: relative;
}


.tag {
background-color: #5192b2;
  color: #f1faff;
}

.tag:hover {background:#28779e; color:#fff!important;}

.social-icon:not(.copyright .social-icon) li {
width: 25px;
  height: 25px;
  background: #28779e;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.recent-posts-widget a {color:#3b3b3b; font-size:1rem;}




.blog-widget {
  background-color: #fff;
  border: 1px solid #DEE8EE;
  border-radius: 10px;
  position: relative;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
	   display: flex;
    flex-direction: column;
    height: 100%;
}


.blog-img {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 15px 15px 0 0;
}

.blog-img .serv-img {
    border-radius: 15px 15px 0 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
	transform: translateZ(0);
	-moz-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
	-ms-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
	-o-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
	-webkit-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
	transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
    width: 100%;
}
.blog-img:hover .serv-img {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    transform: scale(1.15);
}
.blog-content {
     flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.blog-content p {flex-grow: 1;}

.blog-content .title {
    font-size: 16px;
    margin-bottom: 10px;
	min-height:40px;
}

.blog-widget .blog-content .title a {
    display: inline-block;
    color: #242423;
}
.blog-widget .blog-content .title a:hover, .blog-widget .blog-content .title a:hover {
	color: #ff0080;
}

.recent-posts-widget img {max-width:100px; max-height:100px; object-fit:cover;}


    @media only screen and (max-width: 767px) {
		.blog-details .article-content .content .lead {
  font-size: 16px;
  font-weight: 400;
line-height: 26px;
}
		
}