@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* skeleton css */

.skeleton {
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: #e0e0e0;
}

.skeleton-category {
    width: 100px;
    height: 15px;
    background: #e0e0e0;
    margin: 10px 0;
}

.skeleton-title {
    width: 80%;
    height: 20px;
    background: #e0e0e0;
    margin: 10px 0;
}

.skeleton-text {
    width: 90%;
    height: 15px;
    background: #e0e0e0;
    margin: 5px 0;
}

.skeleton-button {
    width: 100px;
    height: 15px;
    background: #e0e0e0;
    margin: 10px 0;
}

/* Optional: Add a shimmer effect */
.skeleton-image,
.skeleton-category,
.skeleton-title,
.skeleton-text,
.skeleton-button {
    animation: shimmer 1.5s infinite linear;
    background: linear-gradient(to right, #e0e0e0 0%, #f0f0f0 20%, #e0e0e0 40%, #e0e0e0 100%);
    background-size: 800px 100%;
}

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}


/* skeleton css */

/* vichar capital css styling */


/* global styling reset */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

li {
	list-style: none;
}

label{
	color: #374151;
	font-size: 1rem;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
}

/* .container{
	width: 92%;
	margin: auto;
	height: 100%;
} */

/* table styles */

/* @media only screen and (max-width:576px) {
	.container{
		width: 540px;
	}
}

@media only screen and (max-width:576px) {
	.container{
		width: 1140px;
	}
} */

/* Base container styling */
.container {
	width: 92%;
	max-width: 1140px;
	margin: auto;
	height: 100%;
	padding: 0 20px; 
  }
  
  @media (max-width: 576px) {
	.container {
	  width: 100%;   
	  padding: 0 10px; 
	}
  }
  

/* global styling reset */

/* header styling */
#navButton{
	display: none;
	background: white;
	border: none;
	font-size: 1.3rem;
}

.site-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0.7rem 9rem;
	position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures the header stays above other content */
    transition: box-shadow 0.3s ease-in-out;
	background-color: #FFFFFF;
}

.header_title{
	font-size: 1.25rem;
	font-weight: 600;
	color: #000000;
	font-family: "Playfair Display", serif;
}

.header_sub_title{
	font-size: 0.9rem;
	color: #000000;
	font-weight: 400;
}

#header-brand{
	column-gap: 0rem;
}

.menu-item a{
	font-size: 1rem;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	color: #000000;
}

.menu-item a:hover{
	color: #2563EB;
}

.menu-item a[aria-current="page"]{
	font-weight: bold;
    color: #2563EB;
}

.navlink{
	font-size: 1rem;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	color: #000000;
}

.navlink:hover{
	color: #2563EB;
}

.scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjusted for better visibility */
}

/* header styling */

/* footer styling */

.footer{
	background-color: #111827;
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	row-gap: 1rem;
	font-family: "Roboto", sans-serif;
}

.footer_brand{
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.footer_subtext{
	color: #9CA3AF;
	font-size: 1rem;
	font-weight: 400;
}

/* footer styling */


/* utlity classes */

.active{
	display: flex !important;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page_title{
	font-size: 2.25rem;
	font-weight: 700;
	color: #000000;
	font-family: "Playfair Display", serif;
}

.flex_start_center{
	display: flex;
	justify-content: start;
	align-items: center;
}

.flex_start{
	display: flex;
	justify-content: start;	
	align-items: start;
}

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

.flex_col_center{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


.flex_col_start_center{
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.columngap0_75rem{
	column-gap: 0.75rem;
}	

.columngap1rem{
	column-gap: 1rem;
}

.columngap1_25rem{
	column-gap: 1.25rem;
}	

.rowgap_2_25rem{
	row-gap: 2.25rem;
}

.rowgap_1_5rem{
	row-gap: 1.5rem;
}

.rowgap_1rem{
	row-gap: 1rem;
}

.btn-active{
	background-color: #2563EB;
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	border-radius: 8px;
	padding: 0.5rem 1rem;
	border: none;
}

.btn-inactive{
	border-radius: 8px;
	padding: 0.5rem 1rem;
	border: none;
	font-weight: 500;
	font-family: "Roboto", sans-serif;
	color: #374151;
	background-color: #F3F4F6;
}

.btn-inactive:hover{
	color: #fff;
	background-color: #2563EB;
}

/* utlity classes */

/* home page styling */

#hero{
    min-height: 55vh;
    background: linear-gradient(rgba(15,23,42,0.9), rgba(15,23,42,0.7)),
                  url('https://images.pexels.com/photos/730564/pexels-photo-730564.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    color: white;
    position: relative;
    overflow: hidden;
	/* background-position-y: 0px; */
}

.hero_title{
	font-size: 4rem;
	font-family: "Playfair Display", serif;
	font-weight: bolder;
	color: #FFFFFF;
}

.hero_description{
	color: #FFFFFF;
	font-weight: 400;
	font-size: 1.25rem;
	padding: 0.5rem 0 0 0;
	max-width: 500px;
	font-family: "Roboto", sans-serif;
}

#hero #hero-content {
    max-width: 800px;
}

.explorebtn{
	background-color: #2563EB;
	color: #FFFFFF;
	font-weight: 500;
	font-family: "Roboto", sans-serif;
	font-size: 1rem;
	padding: 1rem 2rem;
	border-radius: 24px;
	margin: 2rem 0 0 0;
	cursor: pointer;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}


.explorebtn:hover {
    background-color: #1E50D4; /* Slightly darker blue */
    box-shadow: 0px 4px 12px rgba(37, 99, 235, 0.5); /* Blue glow effect */
    transform: scale(1.05); /* Slight increase in size */
}

.explorebtn:active {
    transform: scale(0.98); /* Slight shrink effect when clicked */
}

.feature_vichar_container{
	padding: 2.5rem 0;
}

.feature-vichar-posts{
	display: flex;
	align-items: start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}

#feature-vichar-title{
	font-size: 1.875rem;
	font-weight: 600;
	color: #000000;
	font-family: "Playfair Display", serif;
}

#home-filter-btn{
	display: flex;
	padding: 2rem 0 0 0;
}

.newsletter_section{
	padding: 5rem 0;
}

.newsletter_title{
	font-size: 2rem;
	font-family: "Playfair Display", serif;
	font-weight: 700;
	color: #000000;
}

.newsletter_description{
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #4B5563;
	padding: 0.375rem 0 0 0;
}

.newsletter_form{
	padding: 2rem 0 0 0;
	width: 35%;
}


/* navbar css */

  


/* navbar css */


/* Active link styling */
.navlink.active {
    font-weight: bold;
    color: #2563EB; 
}

.blog_post_mobile{
	display: none;
}



/* home page styling */

/* vichar page styling */

	#no-vichars{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-title{
		margin: 0 auto;
		font-size: 1.2rem;
		font-weight: 500;
		color: #111827;
		font-family: "Roboto", sans-serif;
		text-align: center;
	}

#vichar_title{
	color: #111827;
	font-size: 2.25rem;
	font-weight: 700;
	font-family: "Playfair Display", serif;
	text-align: center;
}

#vichar_description{
	text-align: center;
	font-size: 1.25rem;
	color: #4B5563;
	font-weight: 500;
	padding: 0.75rem 0 0 0;
}

.stock_search_container{
	border: 0.7px solid #D1D5DB;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 1.5rem auto;
	max-width: 520px;
}

#stock-search{
	width: 100%;
	border: none;
	outline: none;
}

#category-filters{
	flex-wrap: wrap;
}

.filter-category-btn{
	border-radius: 8px;
	padding: 0.5rem 1rem;
	border: none;
	font-weight: 500;
	font-family: "Roboto", sans-serif;
	color: #374151;
	background-color: #F3F4F6;
}

.filter-category-btn.active {
    background-color: #007bff; /* Blue background for active button */
    color: white;
    border: none;
}


.filter-category-btn:hover{
	color: #fff;
	background-color: #2563EB;
}

#blog-posts{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 2rem 0 0 0;
}

.blog-post{
	display: flex;
	align-items: start;
	justify-content: start;
	flex-direction: column;
	border-radius: 12px;
	max-width: 380px;
	border: 1px solid #e0e0e0;
	cursor: pointer;
	width: 100%;
}

.blog-post .blog_img{
	max-width: 380px;
	width: 100%;
}

.blog-post img{
	width: 100%;
	border-radius: 12px 12px 0 0;
	max-height: 180px;
}

.blog-post:hover {
    transform: translateY(-5px); /* Lifts up slightly on hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
}

.blog_content{
	padding: 1.5rem;
	box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.102);
	border-radius: 0 0 12px 12px;
	width: 100%;
}

.post-category{
	background-color: #2563EB;
	color: #fff;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	font-size: 0.75rem;
}

.post-wrapper{
	margin: 1rem 0 0 0;
}

.post-title{
	font-size: 1.2rem;
	color: #000000;
	font-weight: 600;
	font-family: "Playfair Display", serif;
	margin: 1rem 0 0 0;
	line-height: 1.75rem;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-description{
	font-size: 1rem;
	color: #64748B;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	padding: 0.5rem 0 1rem 0;
	line-height: 1.5rem;
}

.read-more{
	font-size: 1rem;
	color: #2563EB;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
}

@media screen and (min-width:768px) {
	#category-filter-mobile{
		display: none;
	}
}


/* vichar page styling */

.vichar_container{
	padding: 2.25rem 2rem;
}


/* about us page styling */

#aboutus_container{
	padding: 3.75rem 0;
	width: 50%;
}

#aboutus_desc{
	font-size: 1.1rem;
	padding: 2rem 0;
	font-family: "Roboto", sans-serif;
	max-width: 715px;
	font-weight: 400;
	color: #4B5563;
	line-height: 33px;
}

.value_title{
	font-size: 1.5rem;
	font-weight: 600;
	color: #000000;
	font-family: "Playfair Display", serif;
}

.value_desc{
	font-size: 1.25rem;
	font-weight: 400;
	color: #4B5563;
	font-family: "Roboto", sans-serif;
	line-height: 33px;
	max-width: 715px;
}

/* about us page styling */

/* contact us page styling */

#contactus_container{
	padding: 3rem 0;
	column-gap: 6.25rem;
}

#contactus_form{
	border: 1px solid #2563EB;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.102);
}

#touch_title{
	font-size: 1.5rem;
	font-weight: 500;
	color: #1F2937;
	font-family: "Roboto", sans-serif;
	padding: 1.5rem 0;
}

#social_contact{
	padding: 1.5rem 0;
}

.contactus_desc{
	font-size: 1rem;
	font-weight: 400;
	color: #4B5563;
	font-family: "Roboto", sans-serif;
	max-width: 560px;
}

.contactus_desc a{
	color: #4B5563 !important;
}

.contactus_desc a:hover{
	text-decoration:underline;
	color:#2563EB !important;
}

.wpcf7-form{
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.wpcf7-form-control{
	margin: 0.5rem 0 0 0 !important;
	border: 0.8px solid #9CA3AF;
	border-radius: 8px;
	padding: 0.75rem 0 0.5rem 1rem !important;
	width: 100%;
}

.wpcf7-submit{
	width: 100%;
	background-color: #2563EB;
	border-radius: 8px;
	color: #fff;
	font-size: 1rem;
	font-family: "Roboto", sans-serif;
	text-align: center;
	padding: 0.75rem 0 !important;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.wpcf7-submit:hover{
	background-color: #1E50D4; /* Slightly darker blue */
    box-shadow: 0px 4px 12px rgba(37, 99, 235, 0.5); /* Blue glow effect */
}



.wpcf7-spinner{
	display: none;
	margin: 0;
}

#form_title{
	font-size: 1.5rem;
	color: #000000;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	padding: 0 0 1rem 0;
}

/* contact us page styling */

/* code for disabling copy paste  */

/* style.css */

.no-select {
	-webkit-user-select: none;  /* Chrome, Safari, Opera */
	-moz-user-select: none;     /* Firefox */
	-ms-user-select: none;      /* Internet Explorer/Edge */
	user-select: none;          /* Standard */     
  }
  

/* code for disabling copy paste  */

/* back to top button css */

#back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none; /* Initially hidden */
	padding: 12px;
	background-color: #2563EB;
	color: #fff;
	border: none;
	border-radius: 100%;
	cursor: pointer;
	z-index: 1000;
	transition: opacity 0.3s ease;
	font-weight: 600;
  }
  
  #back-to-top:hover {
	opacity: 1;
  }
  
/* back to top button css */


/* blog progress bar css */

  /* Reading Progress Bar */
.reading-progress {
    position: fixed;
/*     top: 0; */
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.1);
    z-index: 9999;
}

.reading-progress-bar {
    height: 100%;
    width: 0;
    background: #0073aa;
    transition: width 0.2s ease-out;
}

  /* blog progress bar css */

  /* social media share css */

  .social-share {
	margin: 0.7rem 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10px;
  }

  .social-share a:hover{
	transform: translateY(-5px);
  }

  #share_title{
	font-size: 1rem;
	font-weight: 400;
	font-family: "Inter", sans-serif;
	margin: 0;
  }
  
  
  /* social media share css */


  /* indiiviual blog css */

  #primary{
	width: 60%;
  }

  .blog_wrapper{
	display: flex;
	align-items: flex-start;
	justify-content: start;
	column-gap: 0rem;
	padding: 2rem 0;
  }

  .related-posts{
	padding: 24px 0 24px 0;
  }

  .related-posts-container{
	display: flex;
	align-items: flex-start;
	justify-items: flex-start;
	column-gap: 32px;
	padding: 24px 0 0 0;
	flex-wrap: wrap;
  }

  .related-post{
	display: flex;
	flex-direction: column;
	max-width: 200px;
  }

  .related-title{
	font-size: 14px;
    margin: 6px 0 0 0;
    color: #1f1f1f;
    font-weight: 400;
	font-family: "Roboto", sans-serif;
  }

	.related-posts-container_new{
	display: flex;
	row-gap: 1rem;
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
	column-gap: 1.5rem;
	}

	  .related-post_new{
	display: flex;
	flex-direction: column;
	max-width: 240px;
	box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.102);
    border-radius: 0 0 12px 12px;
    width: 100%;
    border: 1px solid #e0e0e0;
	cursor: pointer;
  }

.related-post_new:hover{
	transform: translateY(-5px); /* Lifts up slightly on hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
}


	  .related-title-new{
	font-size: 14px;
    margin: 14px 0 14px 14px;
    color: #1f1f1f;
    font-weight: 500;
	font-family: "Roboto", sans-serif;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
  }	

  #related_title_new{
	font-size: 1.3rem;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	text-align: center;
  }

  .entry-title{
	font-size: 1.75rem;
	max-width:740px;
	padding: 0 0 1rem 0;
	font-family: "Roboto", sans-serif;
	font-weight: 600;
  }

  .entry-meta{
	padding: 0 0 10px 0;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
  }

  .wp-block-heading{
	font-size: 1.3rem;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	padding: 10px 0;
  }

.post-content{
	border-bottom: 1.6px solid #e6e6e6;
}

  .entry-content p{
	font-size: 1.125rem;
	font-weight: 400;
	font-family: "Roboto", sans-serif;
	max-width: 740px;
	text-align: justify;
	line-height: 32px !important;
	margin: 0 0 1.5rem 0;
  }

  #related_title{
	font-size: 1.3rem;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
  }

  .post-thumbnail img{
	max-width: 740px;
	height: auto;
   }	

   .single-post #submit{
	border: none;
	background-color: #2563EB;
	color: #fff;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	padding: 0.7rem 0.9rem !important;
	border-radius: 6px;
   }

   .posted-on{
	color: #999999;
	font-size: 14px;
	font-weight: 400;
   }

   #comments{
	margin: 2rem 0 0 0;
   }

   #commentform p{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
   }

   #commentform p input, #commentform p textarea{
	margin: 0.5rem 0 0 0 !important;
    border: 0.8px solid #9CA3AF;
    border-radius: 8px;
    padding: 0.7rem 0 0.5rem 1rem !important;
   }

   .comment-form-cookies-consent{
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	flex-direction: row !important;
	column-gap: 0.5rem !important;
   }

.wp-block-list{
	padding: 0 0 0 1.75rem;
}

.wp-block-list li {
	font-size: 1.125rem;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    max-width: 740px;
    text-align: justify;
    line-height: 32px !important;
    margin: 0 0 1rem 0;	
    list-style: disc !important;
}

 ol li{
	list-style-type: decimal !important;
}

.comments-title{
	font-size: 1.1rem;
    font-weight: 600;
    padding: 0 0 1rem 0;
    font-family: "Roboto", sans-serif;
}

.comment-metadata{
	padding: 0.7rem 0 0 0;
}

.comment-metadata a{
	font-size: 0.85rem;
    font-family: "Roboto", sans-serif;
    color: #64748B;
}

.comment-content p{
	margin: 0;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}

.comment-list li{
	list-style:none !important;
}

.reply{
	margin: 1rem 0;
}

.reply a{
	margin: 2rem 0;
    border: none;
    background-color: #2563EB;
    color: #fff;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
    padding: 0.5rem 0.9rem !important;
    border-radius: 6px;
    font-size: 0.8rem;
}

#reply-title{
	font-weight:500;
	font-size: 1rem
}

.logged-in-as{
	font-size: 1rem !important;
	margin: 0 0 0.5rem 0;
}

.comment-notes{
	font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.comment-notes span{
	font-size:0.9rem;
}

#commentform p{
	margin: 0 0 0.7rem 0;
}

.wp-block-image img{
	margin: 0 0 1.5rem 0;
}


  /* indiviual blog css */


  /*  toc css */

  /* TOC Container */
#toc {
	position: sticky;
	top: 100px; /* Adjust this value as needed */
	left: 20px;
	width: 15%;
	max-height: 80vh;
	overflow-y: auto;
	background: #f7f7f7;
	padding: 10px;
	border: 1px solid #ddd;
	z-index: 999;
  }
  
  /* TOC List Style */
  #toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  #toc li {
	margin-bottom: 5px;
  }
  
  #toc a {
	text-decoration: none;
	color: #333;
	transition: color 0.3s ease;
  }
  
  #toc a:hover,
  #toc a.active {
	color: #3498db;
  }
  
  /* Optional: Indent subheadings */
  #toc li.toc-subheading {
	margin-left: 15px;
  }


  .stock_search_container {
    position: relative; /* Ensures suggestions are positioned relative to this container */
}

.suggestion-list {
    position: absolute;
    top: 100%;       /* Places list directly below the input */
    left: 0;
    z-index: 1000;   /* Ensures list appears above other content */
    background: white;
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px; /* Limits height with scroll if many suggestions */
    overflow-y: auto;
    width: 100%;      /* Matches input width (adjust as needed) */
}

.suggestion-list li {
    padding: 5px 10px;
    cursor: pointer;
}

.suggestion-list li:hover {
    background: #f0f0f0; /* Highlights suggestion on hover */
}


/* vichar capital css styling */

/* search css */



/* search css *//* Style the autocomplete dropdown */
.ui-autocomplete {
    max-height: 200px;          
	overflow: hidden;
    background-color: #ffff;   
    border: 1px solid #cccccc;   
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    z-index: 1000;   
	max-width: 520px;
	position: absolute !important;
	top: 40px !important;
	left: 0px !important;
	width: 100% !important;
	border-radius: 0;
	margin: 0.1rem 0 0 0;
}

/* Style each suggestion item */
.ui-menu-item {      
    cursor: pointer;  
	font-size: 16px !important;
}

/* Add spacing inside suggestions */
.ui-menu-item span {
    margin-left: 10px;
}


.current_page_item{
	font-weight: bold;
    color: #2563EB;
}

/* 404 page css */

	.error_page{
		padding: 1rem 0 1.5rem 0;
	}

	.error_image{
		width: 450px;
		height: 450px;
	}

	.error_title{
		font-size: 1.5rem;
		font-weight: 700;
		color: #000000;
		font-family: "Roboto", sans-serif;
	}	

	.error_btn{
		background-color: #2563EB;
		border-radius: 6px;
		color: #fff;
		font-size: 1rem;
		font-family: "Roboto", sans-serif;
		text-align: center;
		padding: 0.75rem 1rem !important;
		margin: 2rem 0 0 0;
		font-weight: 600;
		cursor: pointer;
	}


/* 404 page css */

/* loading css */

/* Example: change cursor + slightly dim the button while loading */
.cf7-button-loading {
  cursor: wait;
  opacity: 0.7;
}

/* Example: If you want a simple “spinner” using a pseudo-element */
/* (Assumes your submit button is <button> or <input> with class "cf7-button-loading" ) */
.cf7-button-loading::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cf7-spin 0.8s linear infinite;
}

@keyframes cf7-spin {
  to { transform: rotate(360deg); }
}


/* loading css */

/* vichar capital responsive styling */

@media screen and (max-width:768px) {
	
	/* mobile select css */
	
		.ui-autocomplete{
		top: 50px;
		left: 500px;
	}

	#category-filter-mobile{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		margin: 0 auto !important;
		flex-direction: column;
		row-gap: 0.7rem;
		position: relative;
		display: inline-block;
	}

	#category-filter-mobile label{
		font-size: 0.9rem;
	}

	#category-filters{
		display: none;
	}

	#mobile-category-select{
		padding: 8px 12px;
		width: 100%;
		border: 1px solid #d1d5db;
		border-radius: 6px;
		background: white;
		margin: 0.6rem 0 0 0;
		padding: 0.75em 2.5em 0.75em 1em;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;		
		background-image: url('./assets/images/caret-down.png');
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 0.8em auto;
	} 

	.custom-select {
		position: relative;
		width: 100%;
		border: 1px solid #d1d5db;
		border-radius: 6px;
		margin: 0.6rem 0 0 0;
		padding: 0.5em 2.5em 0.75em 1em;
		background-image: url('https://vicharinsights.com/wp-content/uploads/2025/04/caret-down.png');
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 0.6em auto;
		
	}
	
	.selected-option {
		font-weight: 400;
	}
	
	.options {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		border: 1.5px solid #ccc;
		background: #fff;
		z-index: 10;
		max-height: 250px; 
		overflow-y: auto;
		margin: 0.5rem 0 0 0;
		border-radius: 8px;
		box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.102);
	}
	
	.option {
		margin: 0;
		padding: 8px 0 10px 15px;
		font-family: "Inter", sans-serif;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
	}
	
	.option:hover {
		background: #f0f0f0; /* Hover effect for better UX */
	}


	/* mobile select css */
	
	#menu-menu-1{
	 flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 0.9rem;
}


	.flex_start{
		flex-direction: column;
	}

	.page_title{
		font-size: 2rem;
	}
	
		/* 404 page responsive css */

	.error_image{
		width: 100%;
		height: 100%;
	}

	.error_title{
		font-size: 1rem;
		font-weight: 500;
		text-align: center;
	}


	/* 404 page responsive css */

	/* home page responsive css */

	/* kingswell type blog card css */

	.blog_post_mobile{
		display: flex;
	}


	.blog_img_mobile img{
		width: 80px;
		height: 80px;
	}

	.post_title_mobile{
		font-size: 1rem;
		color: #000000;
		font-weight: 600;
	}

	.post_description_mobile{
		font-size: 1rem;
		color: #64748B;
		font-weight: 400;
	}

	/* kingswell type blog card css */

	#navButton{
		display: flex !important;
	}

	.site-header{
		padding: 0.7rem 1rem;
		flex-direction: column;
	}

	#branding_contiainer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	#header-links{
		display: none;
		padding: 0.7rem 0;
		width: 100%;
	}	

	#navul{
		flex-direction: column;
    	row-gap: 0.9rem;
	}

	#hero{
		min-height: 55vh;
		padding: 2rem;
	}

	.hero_title{
		font-size: 2.5rem;
	}

	.hero_description{
		font-size: 1.1rem;
		font-weight: 400;
	}

	.newsletter_form{
		width: 90%;
	}

	.feature_vichar_container{
		padding: 1.5rem 1.5rem;
	}

	.newsletter_section{
		padding: 1rem 0;
	}

	.newsletter_title{
		font-size: 1.2rem;
	}

	.newsletter_description{
		text-align: center;
	}

	/* home page responsive css */

	/* contact us page responsvie css */

	#contactus_container{
		padding: 1rem 1.5rem;
		row-gap: 1.5rem;
	}

	#contactus_form{
		padding: 1rem;
	}

	/* contact us page responsvie css */


	/* about us page responsive css */

	#aboutus_desc{
		text-align: justify;
	}

	.points_wrapper{
		align-items: center;
	}

	#aboutus_container{
		padding: 1rem 1.5rem;
		width: 100%;
	}

	.value_desc{
		font-size: 1.1rem;
		text-align: center;
	}

	/* about us page responsive css */


	/* vichar page responsive css */

		#category-filter-mobile{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		margin: 0 auto !important;
		flex-direction: column;
		row-gap: 0.7rem;
		position: relative;
		display: inline-block;
	}

	#category-filter-mobile label{
		font-size: 0.9rem;
	}

	#category-filters{
		display: none;
	}

	#mobile-category-select{
		padding: 8px 12px;
		width: 100%;
		border: 1px solid #d1d5db !important;
		border-radius: 6px;
		background: white;
		margin: 0.6rem 0 0 0;
		padding: 0.75em 2.5em 0.75em 1em;
		outline: none !important;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;		
		background-image: url('https://vicharinsights.com/wp-content/uploads/2025/04/caret-down.png');
		background-repeat: no-repeat;
		background-position: right 1em center;
		background-size: 0.8em auto;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	}

	/* vichar page responsive css */
	.vichar_container{
		padding: 1rem 1.5rem;
	}

	/* indiviual blog responsive css */

	.entry-content p{
		text-align: justify;
		font-size: 1rem;
	}

	.entry-title{
		font-size: 1.125rem;
		text-align:left;
	}

	#primary{
		width: 100%;
		padding: 0 1.3rem;
	}

	.blog_wrapper{
		flex-direction: column;
		padding: 1rem 0;
	}

	.related-posts-container{
		flex-direction: column;
		row-gap: 1rem;
	}
	
	.related-posts-container_new{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 1.5rem;
		padding: 1rem 0;
	}
	
	.related-post_new{
		max-width:300px;
	}

	#toc{
		position: relative;
		top: 1px;
		left: 5px;
		width: 95%;
		margin: 0 0 0.5rem 0;
	}

	.post-thumbnail{
		width: 100%;
	}

	.post-thumbnail img{
		width: 100% !important;
	}

	.related-posts{
		padding: 0.5rem 0 0.5rem 0;
	}

	.related-posts-container{
		padding: 0.5rem 0 0 0;
	}

	.blog_content{
		padding: 1rem 0.7rem;
	}

	#blog-posts{
		gap: 1rem;
	}
	
	#commentform p input, #commentform p textarea{
		width: 100%;
	}
	
	.comment-form-cookies-consent #wp-comment-cookies-consent{
		width: 5%;
	   }

	.comment-form-cookies-consent label{
		font-size: 0.9rem;
	   }
	
	.comment-form-cookies-consent{
		column-gap: 0.3rem !important;
	}


	/* inidviual blog post responsive css */
}


/* vichar capital responsive styling */