/*
Theme Name: Blog Post css
Author: Babalesh Yadav
Author URI: https://www.63sats.com/
Description: This CSS used in blog post
Version: 1
*/

html {
  scroll-behavior: smooth;
}
#main_blog_section {
  padding-top: 40px;
}

ol, ul{
  margin: 0 0 1.5em 0em;
}
.prm-color {
  color: #063e85;
}
.mt-20 {
  margin-top: 20px !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.pd-10 {
  padding: 10px !important;
}
p.posttag {
    display: flex;
    float: inline-start;
}
.is-fixed .blog-content-desc-index {
    padding-top: 100px;
}
.is-fixed .blog-index-section {
  position: fixed;
  top: 105px;
  width: 830px;
}
.is-fixed .blog-index-title {
  margin-bottom: 0;
  cursor: pointer;
}
.is-fixed #indexlist {
  display: none;
}
.fixed {
  position: fixed;
  top: -310px;
  z-index: 99;
}
.active-index {
  color: #063e85;
  font-size: 16px;
  font-weight: 700;
}
.position-relative {
  position: relative;
}

#main_blog_section a{
  color:rgb(0, 0, 0);
  font-family: 'Montserrat Light';
}
#main_blog_section a:hover{
  color:#000;
}
.top-section{
  width: 100%;
}
.header-top {
  height: 100px;
  width: 100%;
}
.header-background {
  background-color: #000;
}
.master-banner img{
    width: 100%;
}
.img-thumb {
    margin-bottom: 10px;
}
.index-heading {
  color: #023f88;
}
.faqtitle h2{
    margin-top: 1.5rem;
}
#indexlist{
  padding-left: 0px;
  margin-left: 15px;
  cursor: pointer;
  padding: 10px;
}
.index-number {
  font-weight: 700;
}
.blog-post-title h2, .blog-post-title h4{
    margin: 15px 0px 15px 0px;
    font-weight: 600 !important;
}
.master-banner{
    margin-top: 1rem;
}
.blog-index-title {
  padding: 10px;
  background: #063e85;
  color: #fff;
}
.blog-index-title h4{
  color: #fff;
  font-weight: 700;
  margin: 0
}
.blog-index-section{
  background: #f5f5f7;
}
.blog-link {
  color: #7a4bdd !important;
}
.publish-date-category span{
    font-family: 'Montserrat Semibold';
}

.publish-date-category span a {
    font-family: 'Montserrat Semibold', sans-serif !important;
}

/* Social media share button */
.social-share{
    padding: 5px;
}
.social-share .share-list {
  display: flex;
  flex-direction: row;
}

.share-list i {
  color: #fff;
}

.social-share .share-list a {
  border-radius: 100px;
  width: 35px;
  height: 35px;
  padding: 9px;
  margin: 5px 5px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.social-share img {
  width: 100%;
  height: 100%;
  filter: invert(100%);

}

.wp-block-list {
    font-family: 'Montserrat light', sans-serif !important;
    margin-left: 20px;
  
}

a.fb-h { background: #3B5998; }
a.tw-h { background: #00acee; }
a.li-h { background: #0077B5; }
a.re-h { background: #FF5700; }
a.pi-h { background: #c8232c; }

/* end */
/* Accordian css */
.accordion {
  max-width: 600px;
  margin: 0px 0px 0px 0px;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  cursor: pointer;
  padding: 10px 20px;
  background-color:#f7f9fb;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background-color: #e0e0e0;
}

.accordion-content {
  display: none;
  padding: 10px 20px;
}

.accordion-content.show {
  display: block;
  background-color:#fff;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.accordion-item.open .arrow-icon {
  transform: rotate(180deg);
}
.blog-acc-section .accordion-header{
  font-weight: 700;
  font-size: 21px;
}
.blog-acc-section .accordion-item {
  width: 100%;
  margin-bottom: 15px !important;
  border: none;
  background-color: #f0f0f0;
  border-radius: 10px;
}
.blog-acc-section .accordion-header{
  border-bottom: none;
  border-radius: 8px;
} 
  /* Accordian css end */

/* sidebar category list */
.allcategory-list ul{
  padding-left: 0rem !important;
  margin-left: 2px;
  list-style-type: none !important;
  
  
}
.allcategory-list ul li, .allcategory-list ul li a{
  font-size: 16px !important;
  color: #000!important;
  font-family: 'Montserrat light', sans-serif !important;
  
}
.allcategory-list ul li, .allcategory-list ul li a:hover{
  color: #000 !important;
}
/*  */
.posttag a{
  background: #F5F5F7;
  font-size: 13px !important;
  font-weight: 600;
  color: #000;
  margin-right: 8px;
  padding: 5px;
  border-radius: 8px;
  /* margin: 5px !important; */
  letter-spacing: .5px;
  transition: all .3s ease;
  line-height: 1.5;
  display: block;
}
.alltag-list-all p{
  display: inline-block;
  position: relative;
  margin-bottom: 0.5rem !important;
}

/* blog Post slider */

 /**blog section css**/

 .related_blog {
  margin: -12px;
  padding: 11px 6px 43px 0px;
  /*padding: 10px 0;*/
}

.related_blog .section_heading h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 30px;
    text-align: left;
    /* text-transform: uppercase; */
}
.related_blog .section_heading h2 span {
    color: #023F88;
}
.related_blog .section_heading p {
    font-size: 16px;
    margin: 10px 0 5px;
}
.related_blog .single-blog {
    transition: all 0.30s ease 0s;
    margin: 5px;
}
.related_blog .single-blog:hover {
    transform: translateY(-10px);
}
.related_blog .single-blog .post-img {
    position: relative;
}
.related_blog .single-blog .post-img img {
    max-width: 100%;
    height: auto;
    border-radius: 10px 10px 0px 0px;
}
.related_blog .single-blog .post-img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(230, 248, 255, 0.6);
    transition: all 0.30s ease 0s;
}
.related_blog .single-blog:hover .post-img:after {
    opacity: 1;
}
.related_blog .single-blog .single_blog {
    border-top: none;
    padding: 10px;
    background: #fafaf7;
    position: relative;
}
.related_blog .single-blog .post-title {
    margin: 0 0 15px 0px;
    font-size: 20px;
    color: #333;
    display: inline-block;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.related_blog .single-blog .blog-text {
    font-size: 15px;
    line-height: 23px;
    margin: 7px 0 10px;
}
.related_blog .icon-area {
    list-style: none;
    font-size: 14px;
    padding: 0;
    margin: 0;
}
.related_blog .icon-area>li {
    display: inline-block;
    margin-right: 5px;
    color: #555;
    font-style: italic;
    font-family: 'Montserrat Light';
}
.related_blog .icon-area>li i {
    color: #023F88;
    margin-right: 5px;
    font-size: 14px;
}
.related_blog .btn-area a {
    /* background: linear-gradient(to right, #0061AA, #023F88); */
    font-family: 'Montserrat Semibold';
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 4px 18px;
    margin: 10px 0px 10px;
    border: 1px solid #000;
    font-weight: 500;
    color: #000 !important;
    text-transform: capitalize;
    transition: all 0.2s ease-in-out 0s;
}
.related_blog .btn-area a:hover{
    background: linear-gradient(to right, #000000, #000000);
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 4px 18px;
    margin: 10px 0px 10px;
    border: 1px solid #000;
    font-weight: 500;
    color: #fff !important;
    text-transform: capitalize;
    transition: all 0.2s ease-in-out 0s;
}
/* comment box css */
#respond .submit{
  background: linear-gradient(to right, #0061AA, #023F88);
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 7px 18px;
  margin: 10px 0px 10px;
  border: none;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  transition: all 0.2s ease-in-out 0s;
}
#respond .submit:hover{
  color:#fff !important;
}

/* recent blog list  */
.rec-blog-thumb-col{
/* padding: 5px !important; */
  width: 36.333333%;
}
/*.rec-blog-cont-col{
  margin-left: -10px !important;
  margin-top: -7px !important;
  padding: 5px !important;
}*/
.recent-title h5 a {
  font-family: "Montserrat Light", sans-serif !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
  color: #000;
}
.recent-short-details .recent-title h5{
  line-height: 16px; 
}
.recent-excert p{
  font-size: 14px;
  line-height: 18px;
  font-family: "Montserrat", sans-serif !important;
}
.recent-short-details p a{
  color: #000;
  font-family: "Montserrat", sans-serif !important;
}

/* blog form */
#blog-form .blog-getintouch{
  padding: 0px !important;
}
#blog-form .col-12{
  margin-bottom: -15px !important;
  padding: 0px !important;
}
#blog-form p{
  padding: 0px !important;
}
.blog-form-box div {
  background: #f5f5f7;
}
/* custom word cloud */
.custom-word-tag-cloud a {
  text-decoration: none;
  margin: 0 5px;
  color: #333; /* Adjust the color as needed */
}

/* Responsive CSS */
@media (max-width:500px)
{
  .blog-acc-section .accordion-item {
    font-weight: 700;
    width: 100%;
  }
}
/* Extra Small Devices (phones, less than 576px): */
@media (max-width: 575.98px) {
  /* Styles for extra small devices */
  #main_blog_section h1{font-size:33px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h2{font-size:40px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:32px !important; font-family: "Montserrat Bold", sans-serif !important; font-weight: 600;}
  #main_blog_section h4{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:22px !important; font-family: "Montserrat Bold", sans-serif !important; }
  #main_blog_section h6{font-size:20px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size: 16px !important; font-family: "Montserrat", sans-serif !important;}
  .top-blank-section {height: 65px;background-color: #000;}
}

/* Small Devices (phones, 576px and up): */
@media (min-width: 576px) {
  /* Styles for small devices */
  #main_blog_section h1{font-size:33px !important; font-family: "Montserrat Bold", sans-serif !important;;}
  #main_blog_section h2{font-size:40px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:32px !important; font-family: "Montserrat Bold", sans-serif !important; font-weight: 600;}
  #main_blog_section h4{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:22px !important; font-family: "Montserrat Bold", sans-serif !important; }
  #main_blog_section h6{font-size:20px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size:16px !important; font-family: "Montserrat", sans-serif !important;}
}

/* Medium Devices (tablets, 768px and up): */
@media (min-width: 768px) {
  /* Styles for medium devices */
  #main_blog_section h1{font-size:35px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h2{font-size:40px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:32px !important; font-family: "Montserrat Bold", sans-serif !important; font-weight: 600;}
  #main_blog_section h4{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:22px !important; font-family: "Montserrat Bold", sans-serif !important; }
  #main_blog_section h6{font-size:20px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size:16px !important; font-family: "Montserrat", sans-serif !important;}

}

/* Large Devices (desktops, 992px and up): */
@media (min-width: 992px) {
  /* Styles for large devices */
  #main_blog_section h1{font-size:35px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h2{font-size:40px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:32px !important; font-family: "Montserrat Bold", sans-serif !important;} font-weight: 600; 
  #main_blog_section h4{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:22px !important; font-family: "Montserrat Bold", sans-serif !important; }
  #main_blog_section h6{font-size:20px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size:16px !important; font-family: "Montserrat", sans-serif !important;}
}

/* Extra Large Devices (large desktops, 1200px and up): */
@media (min-width: 1200px) {
  /* Styles for extra large devices */
  #main_blog_section h1{font-size:48px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h2{font-size:40px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:32px !important; font-family: "Montserrat Bold", sans-serif !important;} font-weight: 600; 
  #main_blog_section h4{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:22px !important; font-family: "Montserrat Bold", sans-serif !important; }
  #main_blog_section h6{font-size:20px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size:16px !important; font-family: "Montserrat", sans-serif !important;}
}

/* Styles for 4K and higher resolution screens */
@media (min-width: 1921px) {
  /* Styles for extra large devices */

  #main_blog_section h1{font-size:60px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h2{font-size:48px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h3{font-size:42px !important; font-family: "Montserrat Bold", sans-serif !important;} font-weight: 600; 
  #main_blog_section h4{font-size:34px !important; font-family: "Montserrat Bold", sans-serif !important;}
  #main_blog_section h5{font-size:28px !important; font-family: "Montserrat Bold", sans-serif !important; line-height: 32px;}
  #main_blog_section h6{font-size:24px !important; font-family: "Montserrat Semibold", sans-serif !important;}
  #main_blog_section p{font-size:20px !important; font-family: "Montserrat", sans-serif !important;}
}

/* Landscape orientation for tablets and larger mobile devices: */
@media (max-width: 1024px) and (orientation: landscape) {
  /* Styles for landscape orientation */
}

/* Portrait orientation for tablets and larger mobile devices: */
@media (max-width: 768px) and (orientation: portrait) {
  /* Styles for portrait orientation */
}