/* Fonts */
:root {
  --default-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins", serif;
  --nav-font: "Poppins", serif;
}

/* yellow */
/* #ecde4a */
/* light blue #ac71ff */
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #232323;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #232323;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #6b4acc;
  --accent-color-light: #ac71ff;
  --accent-color-yellow: #ecde4a;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */

  --grey: #f9fafc;
  --dark_grey: #e6e6e6;
  --white: #fff;
  --dark: #232323;
  --light_dark: #444;
  --red: #df1c7f;
  --blue: #6213d3;
  --blue_light: #ac71ff;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #485664;
  /* The default color of the main navmenu links */
  --nav-hover-color: #6b4acc;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #485664;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #6b4acc;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --footer-background-color: #3a4753;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

main.main {
  padding: 0 0 0 340px;
  position: relative;
  /* min-height: 2000px; */
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: #ebebeb;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #adadad;
}

.card-header>.card-tools {
  float: right;
  margin-right: -.625rem;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-display: swap;
}
.text-primary {
  color: var(--accent-color) !important;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  /* color: color-mix(in srgb, var(--accent-color), transparent 25%); */
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-display: swap;
}

.imp_note {
  border-left: 2px solid var(--red);
  background-color: #f9ffce;
  /* padding-left: 15px; */
  display: inline-block;
  padding: 10px 15px;
  margin: 15px 0;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 5px 0;
  transition: all 0.5s;
  z-index: 997;
  box-shadow: 0px 0 3px color-mix(in srgb, var(--default-color), transparent 85%);
}

h2.card-title {
  font-size: 22px;
  color: var(--contrast-color);
  margin: 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 48px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 32px;
  font-weight: 300;
  margin: 0;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-weight: 400;
  font-size: 34px;
  margin-left: 2px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  /* .header .logo {
    order: 1;
  } */

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 5px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-display: swap;
    font-display: swap;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: 90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--footer-background-color);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
  padding-left: 290px;
}

.footer .footer-top {
  background-color: color-mix(in srgb, var(--background-color), white 5%);
  padding-top: 50px;
  padding-left: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-display: swap;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
  font-display: swap;
}

.footer h4 {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.footer .footer-links {
  margin-bottom: 30px;
}


.footer .footer-links h5 {
  margin-bottom: 15px;
}



.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  list-style-type: none;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer-link li a {
  color: #fff;
}

.footer .footer-links ul li a:hover {
  /* color: var(--accent-color); */
  text-decoration: underline;
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 30px 0;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

.footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--contrast-color);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: var(--accent-color);
  text-decoration: none;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 55px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}



/*--------------------------------------------------------------
# Global Sections d
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 30px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }

  .footer {
    padding-left: 0;
  }
}



.read-more {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.3s;
  display: -nline-flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  background: var(--accent-color);
  display: inline-block;
}

.read-more i {
  font-size: 16px;
  margin-left: 4px;
  line-height: 0;
  transition: 0.3s;
}

.read-more:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
  padding-right: 10px;
}

.read-more:hover i {
  margin-left: 10px;
}


/*--------------------------------------------------------------
# Home Posts Section
--------------------------------------------------------------*/
.home_post article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 20px 20px 20px 20px;
  /* height: 100%; */
  border-radius: 10px;
  position: relative;
}

.home_post article::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: var(--accent-color);
  border-radius: 50%;
  border: 10px solid #fff;
  left: -15px;
  top: 50px;
}

.home_post .blog_col {
  margin: 20px 0;
}

.home_post .post-img {
  max-width: 100%;
  /* margin: -30px -30px 15px -30px; */
  overflow: hidden;
}

.home_post .post-img img {
  max-width: 100%;
}

.home_post .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.home_post .title {
  font-size: 24px;
  font-weight: 500;
  padding: 0;
  margin: 0 0 20px 0;
}

.home_post .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.home_post .title a:hover {
  color: var(--accent-color);
}

.home_post .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.home_post .post-author {
  font-weight: 500;
  margin-bottom: 5px;
}

.home_post .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 500;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 500;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info {
  padding: 40px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 92%);
  overflow: hidden;
}

.contact .info h3 {
  font-weight: 500;
  font-size: 24px;
}

.contact .info p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 30px;
  font-size: 15px;
}



/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 500;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 500;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/


.share_btn_outer {
  display: flex;
  justify-content: right;
}

.share_btn_outer {
  text-align: right;
}

.share_btn_outer #social-links ul {
  margin-top: 0px;
  padding: 0 6px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .25);
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  display: inline-block;
}

.share_btn_outer #social-links ul li {
  display: inline-block;
}

.share_btn_outer #social-links ul li a {
  font-size: 17px;
  color: var(--accent-color);
  width: 25px;
  text-align: center;
  line-height: 20px;
  padding: 5px 0 5px;
  display: inline-block;
}

.share_btn_outer #social-links ul li a:hover {
  color: var(--blue);
}

.share_single {
  display: flex;
  justify-content: end;
}

.share_single .share_on {
  margin-right: 10px;
}

.share_single #social-links ul {
  width: 120px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}



.share_single #social-links ul li a:hover i {
  color: var(--accent-color) !important;
}

.share_single #social-links ul li+li {
  padding: 0 !important;
}


.card-tools .share_btn_outer {
  color: var(--contrast-color);
  margin: 0px;
  padding: 0;
  margin-right: 15px;
}

.card-tools .share_btn_outer #social-links ul {
  margin: 0;
  background: var(--contrast-color);
}

.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 500;
  padding: 0;
  margin: 0px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details table {
  display: block;
  overflow-x: auto;
}



.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: 400;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px;
  position: relative;
  text-align: left;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.meta-top {
  /* margin-top: 20px; */
  color: #262626;
}

.meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.meta-top ul li+li {
  padding-left: 20px;
}

.meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.meta-top a {
  color: #262626;
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

.related_post_outer .title_col h3 a {
  color: var(--default-color);
}

.related_post_outer .title_col h3 {
  font-size: 20px;
  margin-top: 0;
}

.related_post_outer .title_col {
  padding: 5px 15px;
}

.related_post_outer .related_post_row {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .18);
  margin-bottom: 15px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}


/* old site comments style */

/*comment styling*/
.comment-user i,
.comment-date i {
  color: var(--red);
}

.comment-user {
  font-size: 18px;
  font-style: italic;
  padding-bottom: 10px;
}

.comment-date {
  font-style: italic;
  padding-bottom: 10px;
}

#spinner,
#tick {
  display: none;
}

.outer-comment {
  margin-left: 0;
  padding-left: 15px;
  padding-right: 15px;
}

.outer-comment li {
  list-style-type: none;
  margin-top: 20px;
}

.w-100 {
  width: 100% !important;
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}


.media-body {
  border: 1px solid #ededed;
  padding: 15px;
  position: relative;
  -ms-flex: 1;
  flex: 1;
}

.media-body:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  left: -16px;
  top: 14px;
  border-right-color: inherit;
  border-width: 16px;
  border-left: 0;
}

.media-body:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  left: -29px;
  top: 15px;
  border-right-color: #FFFFFF;
  border-width: 15px;
}

.media-body:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  left: -16px;
  top: 14px;
  border-right-color: inherit;
  border-width: 16px;
  border-left: 0;
}

.media-body .media-body:last-child {
  background: rgba(0, 0, 0, .01);
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* Question block start */
.card_question_block {
  box-shadow: 0 0 3px rgba(0, 0, 0, .2)
}

.card_question_block .card-header {
  padding: 5px;
  border-bottom: none;
}

.card_question_block .card-header h3 {
  font-size: 20px;
}



.card_question_block .icheck-primary {
  background: #f8f9fa;
  padding: 7px;
  border-radius: 2px;
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  margin-bottom: 15px !important;
  display: flex;
}

.dark-mode .card_question_block .icheck-primary {
  background: #454d55;
}

.card_question_block .icheck-primary:hover {
  background: #ededed;
}

.dark-mode .card_question_block .icheck-primary:hover {
  background: #000000;
}

.card_question_block label {
  display: block;
  width: 100%;
  font-weight: 500 !important;
}

.card_question_block .icheck-primary.cr_an,
.card_question_block .icheck-primary.cr_an:hover {
  background: #d7ffdc;
  color: green;
}

.card_question_block .icheck-primary.r_an,
.card_question_block .icheck-primary.r_an:hover {
  background: #f9d9d3;
  color: red;
}


.card_question_block .ans_number {
  position: absolute;
  left: 5px;
  top: 5px;
  font-weight: 500;
}

/* Question block end */

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  /* position: sticky; */
  /* top: 90px; */
  /* margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%); */
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 500;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget .form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
  border-radius: 18px;
}

.search-widget .form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 70px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget .form input[type=text]:focus {
  outline: none;
}

.search-widget .form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
  border-radius: 22px;
}

.search-widget .form button i {
  line-height: 0;
}

.search-widget .form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget .form:is(:focus-within) {
  border-color: var(--accent-color);
}

/* global mdoal search result style */
.g_search_list {
  min-height: 30vh;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 0px;
}

.g_search_list ul {
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.g_search_list ul.ul_border {
  border: 1px solid #ededed;
}

.dark-mode .g_search_list ul.ul_border {
  border: none;
}

.g_search_list ul li {
  list-style-type: none;

}

.g_search_list ul li a {
  color: #232323;
}

.dark-mode .g_search_list ul li a {
  color: #fff;
}


.g_search_list ul li a {
  text-decoration: none;

  padding: 15px 22px 15px 24px;
  display: block;
  position: relative;
}

.g_search_list ul li a .result_title {
  font-size: 16px;
  display: block;
}

.g_search_list ul li a .result_content {
  font-size: 13px;
  display: block;
}

.g_search_list ul li:not(:last-child) a {
  border-bottom: 1px solid #ededed;
}

.dark-mode .g_search_list ul li:not(:last-child) a {
  border-bottom: none;
}

.g_search_list ul li a:hover {
  color: #fff;
  background: var(--accent-color);
}

.g_search_list i.second {
  display: none;
}

.g_search_list li a i.first {
  /* margin-right: 10px; */
  position: absolute;
  top: 20px;
  left: 5px;
  font-size: 18px;
}

.g_search_list li:hover i.second {
  display: block;
}

.g_search_list li a:hover i.second {
  display: block;
  position: absolute;
  top: 18px;
  right: 10px;
  /* padding-top: 6px; */
  transform: rotate(90deg);
  color: #fff;
}

.g_search_list li a:hover i.second {
  color: #fff;
}

.dark-mode .g_search_list li a:hover i.second {
  color: var(--white);
}

/*//global searchlist styling */


.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}



/* sidebar menu */


.sidebar_menu_open_btn {
  color: var(--heading-color);
  font-size: 28px;
}

.sidebar_menu_open_btn:hover {
  color: var(--accent-color);
  font-size: 28px;
}

.sidebar_menu_close_btn {
  position: absolute;
  right: -16px;
  top: 8px;
  font-size: 28px;
  color: #4a494b;
  background: #ecde4a;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  z-index: 99;
}

.sidebar_menu_close_btn:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-size: 28px;
}

.sidebar-navigation {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  position: fixed;
  z-index: 400;
  background-color: #f5f5f5;
  width: 290px;
  height: calc(100% - 60px);
  left: 0px;
  top: 63px;
  border-radius: 10px;
  padding-top: 0px;
  padding-bottom: 10px;
}

.sidebar-navigation .title {
  display: block;
  font-size: 14px;
  line-height: 16px;
  background-color: #fff;
  align-items: center;
  font-weight: 500;
  padding: 16px;
  border-bottom: 1px solid #ccc;
}

.sidebar-navigation .sidebar_inner {
  height: 100%;
  overflow-y: auto;
}

.sidebar-navigation ul {
  margin: 0;
  padding: 0;

}

.sidebar-navigation ul li {
  display: block;
  position: relative;
}

.sidebar-navigation ul li a {
  position: relative;
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #2e2e2e;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.sidebar-navigation ul li em {
  font-size: 18px;
  position: absolute;
  right: 5px;
  top: 19px;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 9;
  background: var(--accent-color-light);
  color: #fff;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 32px;
}

.sidebar-navigation ul li.selected>em {
  background: var(--accent-color);
  color: #fff;
}

.sidebar-navigation ul li:hover>a,
.sidebar-navigation ul li.selected>a {
  background-color: rgba(0, 0, 0, 0.06);
}

.sidebar-navigation ul li ul {
  display: none;
}

.sidebar-navigation ul li ul li {
  font-weight: 400;
}

.sidebar-navigation ul li ul.open {
  display: block;
}

.sidebar-navigation ul li ul li a {
  color: #495d62;
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 400;
}

.sidebar-navigation ul li ul li:hover>a {
  background-color: #e6ebed;
}

.sidebar-navigation ul li a.active,
.sidebar-navigation ul li a.active:hover {
  background-color: #6b4acc;
  color: #fff;
}

.sidebar-navigation ul ul a {
  padding-left: 16px;
}

.sidebar-navigation ul ul ul a {
  padding-left: 32px;
}

.sidebar-navigation ul ul ul ul a {
  padding-left: 48px;
}

.sidebar-navigation ul li ul li:hover>a:before,
.sidebar-navigation ul li ul li.selected>a:before {
  margin-right: 10px;
}

.sidebar-navigation ul li ul li.selected.selected--last>a {
  background-color: #6b4acc;
  color: #fff;
}

.sidebar-navigation ul li ul li.selected.selected--last>a:before {
  background-color: #fff;
}

.subMenuColor1 {
  background-color: #fbfcfc;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

.subMenuColor2 {
  background-color: white;
}

/* sidebar menu end */

/* code block style */
.code_view_card .code_view_outer_outer {
  display: flex;
  padding: 0;
}

.code_view_card .code_view_outer {
  width: 100%;
  max-width: 100%;
}

.code_view_card {
  padding-right: 0;
  box-shadow: none;
  border: none;
}

.code_view_card pre {
  background: 0 0;
  padding: 0;
  max-height: 85vh;
}

.code_view_card .editor_btn_outer {
  width: 6%;
  max-width: 45px;
  padding: 10px 5px;
  position: relative;
}

.code_view_card .editor_btn_inn {
  position: sticky;
  top: 70px;
}

button.btn_maximize {
  background: #ededed;
  display: inline-block;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 6px rgb(0 0 0/30%) !important;
  border-radius: 50%;
  color: var(--red);
}

/* code block style  end*/


/* 
.footer_menu_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
} */

.footer_menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style-type: none;
  padding: 0;
}

.footer_menu>li {
  margin-bottom: 0px;
}

.footer_menu>li>a {
  color: white;
  font-size: 1.25rem;
}

/* 
.footer_menu li:first-child {
  font-size: 20px;
} */


.footer_menu a {
  text-decoration: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.footer_menu ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 10px;
}

.footer_menu ul li {
  margin-bottom: 10px;
}

.footer_menu ul li a:hover {
  text-decoration: underline;
}

/* tab style */

.tab_style_1 .tab-pane {
  padding: 0;
  /* height: 80px; */
}

.tab_style_1 .nav-tabs {
  position: relative;
  border: none !important;
  background-color: #fff;
  /*   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
  border-radius: 6px;
}

.tab_style_1 .nav-tabs li {
  margin: 0px !important;
}

.tab_style_1 .nav-tabs li button {
  position: relative;
  margin-right: 0px !important;
  padding: 5px 12px !important;
  font-size: 16px;
  border: none !important;
  color: #333;
  margin: 0px;
}

.tab_style_1 .nav-tabs button:hover {
  background-color: #fff !important;
  border: none;
  color: var(--accent-color-light);
}

.tab_style_1 .slider {
  display: inline-block;
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background-color: var(--accent-color-light);
  position: absolute;
  z-index: 1200;
  bottom: 0;
  transition: all .4s linear;

}

.tab_style_1 .nav-tabs .active {
  background-color: transparent !important;
  border: none !important;
  color: var(--accent-color-light) !important;
}

.btn_try_it {
  background: var(--accent-color-light);
  /* float: right; */
  /* place-self: flex-end; */
  color: var(--contrast-color);
  padding: 5px 10px;
  margin-left: 5px;
  border: none;
}

.btn_try_it:hover,
.btn_try_it:focus,
.btn_try_it:active {
  background: var(--accent-color-yellow) !important;
  color: var(--contrast-color) !important;
  border: none;
}

.btn_try_it i {
  margin-right: 5px;
}

/* tab style end*/


.blog-details .article img {
  max-width: 100%;
}

.compare_div {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 10px;
  border-radius: 10px;
  margin-top: 15px;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .search-widget .form {
   width: 195px;
  }

}
@media (max-width: 1199px) {
  main.main {
    padding: 0 0;
  }


  .sidebar-navigation {
    display: none;
    height: 100%;
    left: -300;
    transition: all .3s;
    padding-top: 40px;
  }


  .sidebar-navigation.open_menu {
    display: block;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .r_sidebar {
    display: none;
  }


  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
    display: none;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 0;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-display: swap;

    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 5px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
    background: var(--accent-color);
    border-radius: 50%;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: transparent;
    transition: 0.3s;
    width: 300px;
    max-width: 100%;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }

  .sidebar_menu_open_btn {
    margin-right: 15px;
  }

  .blog-details .article {
    padding: 15px;
    /* box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 8px; */
  }



  .footer_menu {

    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .footer .footer-top {
    /* padding-top: 20px; */
    padding-left: 0px;
  }

  .home_post article {
    padding: 15px;
  }


}