@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body,html{margin:0px;padding:0px;font-family: "Inter";}
h1, h2, h3, h4, h5, h6, a, span, b, strong, ul, li, p{font-family: "Inter";}
a,a:hover{text-decoration:none !important;outline:none !important;}
a:visited{outline:none;}
b, strong{font-weight: bold !important;}
strong{color: #2D2D2D !important;}
input{font-weight:normal;}
ul{font-weight:normal;list-style:none;padding:0px}
/* common banner design/Home banner design */
.vmakerheroimage{min-height: 520px;background-image: url('https://www.vmaker.com/hub/wp-content/themes/animaker/img/Traindarkbackground.png');display: flex;align-items: center;text-align: center;}
.vmakerheroimage .firstbox{margin: auto;}
.vmakerheroimage .firstbox h1{color: #fff;font-size: 56px;font-family: "Inter", sans-serif;font-weight: 600;}
.vmakerheroimage .firstbox h1 span{color: #60d3b2}
/* Search design */
.searchFilter{margin:40px auto;max-width:573px;}
#ajaxsearchlite1{border: 1px solid #525252;border-radius: 30px;background: #FFFFFF1D;}
#ajaxsearchlite1 .probox{background: #FFFFFF1D;height: 50px !important;  background: transparent !important;  display: flex;align-items: center;}
#ajaxsearchlite1 .probox .proinput input{height:50px !important;font: normal normal normal 16px/24px Open Sans !important;  letter-spacing: 0px;  color: #FFFFFF !important;  text-shadow: none;}
div.asl_w .probox .promagnifier{background: transparent !important;margin:0px 25px 0px 0px !important;}

.category-tags-div a{background: #4f504f;border-radius: 8px;padding: 10px 20px;color: #fff;font: normal normal normal 12px/24px 'Open Sans';margin: 0px 8px;}
.category-tags-div a:hover{box-shadow: 0px 0px 4px #fff;}
.mainCardWrapper{background-color: #fff;padding: 80px 140px}
/* common card design */
.card{display: flex;flex-direction: row;margin-bottom: 50px;padding:30px;justify-content: center;align-items: center;}
.card a:hover{text-decoration: none;}
.card:hover{background: #FFFFFF 0% 0% no-repeat padding-box;box-shadow: 0px 20px 40px #00000017;border-radius: 30px;cursor: pointer;}
.card .cardImg{ min-width: 409px;height: 280px;border-radius: 20px;margin-right: 50px;position: relative;}
.card .cardImg img{width: 100%;height: 100%;border-radius: 20px;object-fit: cover;object-position: left;}
.card .cardContent .blog-post-title{font: normal normal bold 32px/39px "Inter";letter-spacing: 0px;color: #000000;font-size: 32px}
.card .cardContent p{font: normal normal normal 18px/30px "Inter";letter-spacing: 0px;color: #000000;font-size:18px;margin:0px;}
.author{display: flex;align-items: center;}
.author img{width: 28px;height: 28px;border-radius: 50px;margin-right: 10px;border:1px solid #fff;}
.author p , .author p a{font-size: 12px;font-family: "Inter"; letter-spacing: 0px;color: #000000;}
.author p a:hover{text-decoration: underline !important;}
.author p , .author p span{font: normal normal normal 12px/15px "Inter";letter-spacing: 0px;color: #888888;}
.author p line{color: #E0E0E0;margin: 0px 15px 0px;position: relative;top: 2px;}
#tags{position: absolute;left: 16px;top: 16px;background: #000000ab 0% 0% no-repeat padding-box;border-radius: 8px;color: #fff;font-size: 12px;font-family: "inter";padding: 8px 15px;}
/* pagination design */
.wp-pagenavi{text-align: center;}
.wp-pagenavi .pages{display: none;}
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi .page, .wp-pagenavi .nextpostslink{width: 48px;height: 48px;background: #F8F8F8 0% 0% no-repeat padding-box;border-radius: 50px;color: #2D2D2D;font-size: 20px;font-family: "Inter";border:0px;display: inline-block;line-height: 2;margin: 0px 10px;font-weight: normal !important;}
.wp-pagenavi .current , .wp-pagenavi a:hover{background: #5CD3C5 0% 0% no-repeat padding-box;color: #fff;font-weight: normal !important;}
/* post page design */
.bannerSection{display: flex;max-width: 100%;overflow: hidden;margin: 50px 0px 100px;}
.bannerContent{width: calc(100% - 560px);background: #61D2B2 0% 0% no-repeat padding-box;display: flex;flex-direction: column;align-items: start;justify-content: center;padding:0px 50px 0px 150px;}
.bannerContent h1{color: #fff;font-size: 56px;font-family: "Inter";line-height: 60px;font-weight: bold;margin: 0px 0px 40px;}
.bannerImage{width: 560px; height: 460px;background-size: cover;background-position: center;background-repeat: no-repeat;}
.bannerImage img{object-fit: cover;object-position: center;width: 100%;height: 100%;display: none;}
.bannerSection .author{width: 100%;}
.bannerSection .author a, .bannerSection .author span{color: #fff;font-family: "Inter";font-size: 14px;}
.bannerSection .author p line{color: #fff;}
.blog-page-content{padding: 0px 40px;}
#tableofcontents{position: sticky;top: 120px;background: #F8F8F8 0% 0% no-repeat padding-box;border-radius: 30px;padding: 40px 30px 40px;}
#tableofcontents h4{font-size:20px;font-family: 'Inter' !important;color: #343434 !important;margin-bottom: 20px;}
#tableofcontents p{line-height: 1.1;margin-bottom: 17px;}
#tableofcontents a{font-size:14px;line-height: 1.3;font-family: 'Inter' !important;color: #4c4c4c !important;cursor: pointer;transition: all .33s ease-out;line-height: 1.3;}
#tableofcontents p:hover{font-weight:bold;cursor: pointer;}
.rightSection{position: sticky;top: 120px;background-image:url("https://www.vmaker.com/hub/wp-content/themes/animaker/img/sticky-background.svg");border-radius: 18px;text-align: center;padding:30px;background-position: center;background-repeat: no-repeat;width: 220px;}
.rightSection img{width: 100px;height: 32px;font-weight: bold;}
.rightSection h3{color: #FFFFFF;font-size: 22px;margin:20px 0px 25px}
.rightSection a{background: #FFFFFF 0% 0% no-repeat padding-box;border-radius: 25px;color: #000000;font-size: 16px;font-weight: 600;width: 100%;display: inline-block;padding: 10px 0px;max-width: 150px;}
.rightSection a:hover{box-shadow: 0px 0px 5px #fff;}
.post{padding: 0px 25px}
.post h2{color: #000000;font-family: "Inter";font-size: 32px;font-weight: bold;margin:0px 0px 40px}
.post p{font-size: 18px;margin-bottom: 40px;color: #000000;line-height: 30px;}
.post a{ color: #F47503;font-size: 18px;line-height: 30px;}
.post a:hover{text-decoration: underline !important;}
.post strong{font-size: 18px;color: #000000 !important;line-height: 30px;}
.post img{min-height: 350px;object-fit: cover;object-position: center;border-radius: 12px;margin: 0px 0px 40px;}
.post  em{background: #EAFFF9 0% 0% no-repeat padding-box;border-radius: 12px; color: #000000;font-size:18px;display: inline-block;padding: 40px 40px;text-align: center;font-style: italic;}
.post  em a{color: #61D2B2;}
.post h3{color: #000000;font-size: 20px;margin-bottom: 40px;font-weight: bold;}
.head-design h3{color: #000000;font-size: 32px;font-weight: bold;margin-bottom: 40px;}
.rel-vid{padding:0px 25px;}
.blog-page-content{margin: 0 auto;width: 100%;display: inline-block;}
#for-rel-video{display: flex;align-items: center;margin-bottom: 60px;padding: 15px;border-radius: 15px;}
#for-rel-video:hover{cursor: pointer;box-shadow: 0px 20px 40px #00000017;}
#for-rel-video .single.imagDiv {max-width: 146px;height: 102px;width: 100%;margin:0px 20px 0px 0px;}
#for-rel-video .single.imagDiv img {width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 12px;margin:0px 20px 0px 0px;}
#for-rel-video h5{color: #000000;font-size: 20px;line-height: 30px;margin:0px 0px 15px;font-weight: bold;}
#for-rel-video .contentDiv{max-width: calc(100% - 300px);}
#subscribe{background-image: url('https://www.vmaker.com/hub/wp-content/themes/animaker/img/Traindarkbackground.png');padding: 100px 0px;text-align: center;}
#subscribe p{font-size: 32px;font-weight: bold;color: #fff;margin-bottom: 60px;}
#subscribe input.email-classname{background: #FFFFFF 0% 0% no-repeat padding-box;border: 1px solid #FFFFFF;border-radius: 30px;padding:15px 25px;min-width: 430px;}
#subscribe input.submit-classname{background: transparent linear-gradient(78deg, #FD0D8D 0%, #FFCD24 100%) 0% 0% no-repeat padding-box;border-color: transparent;color: #fff;font-size: 18px;font-weight: bold;width: 180px;border-radius: 28px;padding: 10px 10px;}
.blog-single  .post ul{margin-bottom: 40px;}
.blog-single  .post ul li{color: #000000 !important; font-size: 18px !important;position: relative;padding-left: 30px;margin-bottom: 15px;}
.blog-single  .post ol li{color: #000000 !important; font-size: 18px !important;position: relative;padding-left: 30px;margin-bottom: 15px;}

.blog-single .post ul li::before {content: '';position: absolute;left: 3px;top: 13px;transform: translateY(-50%);width: 12px;height: 12px;background-color: #61D2B2; border-radius: 50%;}
.mainCardWrapper .container{width: 100%;}
/* customize css */
div.asl_r.vertical{background: #FFFFFF !important;box-shadow: 0px 20px 40px #00000017 !important;border-radius: 14px !important;}
div.asl_r .results .item .asl_content h3 a {font: normal normal bold 16px/24px Inter !important;letter-spacing: 0px !important;color: #000000 !important;width: 100% !important;display:inherit;padding: 0px 20px !important;}
div.asl_r .results .item .asl_content h3 a:hover{font: normal normal bold 16px/24px Inter !important;color: #000000 !important;}
.asl_r .results .item .asl_content .asl_desc{display: none !important;}
div.asl_r .results .item .asl_content{display: flex !important;align-items:center !important;}
div.asl_w .probox .proinput input.autocomplete{display: none !important;}
.main-page-content .blog-left-container h3{font: normal normal normal 32px/53px Inter !important;letter-spacing: 0px;color: #B9B9B9;padding-bottom: 60px;}
.main-page-content .blog-left-container h3 span, span.asl_nores_header {font: normal normal normal 32px/39px Inter !important;letter-spacing: 0px;color: #000000;}
.results .asl_nores .asl_keyword{display:none !important;}
div.asl_r .results .asl_nores{display: flex !important;align-items: center !important;justify-content: center !important;font-size: 20px !important;}
span.asl_nores_header{display: none !important;}
div.asl_r .results .asl_nores::after{content:"No result Found!";display:block;}
div[id*='ajaxsearchliteres'].wpdreams_asl_results .results img.asl_image {width: 146px !important;height: 90px !important;border-radius: 12px !important;}
.no-posts{text-align: center;font: normal normal normal 32px / 39px Inter;letter-spacing: 0px;color: #000000;}
div.asl_r.asl_w.vertical .results .item::after{display: none !important;}
div.asl_r .resdrg{max-height: 400px !important;overflow-y: auto;}
/* scrollbar */
/* ::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-thumb {background: #d3d3d3;border-radius: 8px;}
::-webkit-scrollbar-thumb:hover {background: #D1D1D1;} */
/* ::-webkit-scrollbar-track {background: #F4F4F4;border-radius: 8px;} */
/* pagination */
.pagination {text-align: center;align-items: center;justify-content: center;list-style: none;padding: 0;}
.page-numbers {margin: 14px;background: #F8F8F8;border-radius: 50%;height: 48px;width: 48px !important;display: flex;position: relative;align-items: center;justify-content: center;font: normal normal normal 20px/32px Inter;color: #2D2D2D;}
.page-numbers:hover{background:#5CD3C5;color: #fff;}
.page-numbers.current{background: #5CD3C5;color: #fff;pointer-events: none;}
.next.page-numbers,.prev.page-numbers{position: relative;}
.next.page-numbers::after,
.prev.page-numbers::after{display: block;width: 13px;height: 13px;border-top: 2px solid #000;border-left: 2px solid #000;position: absolute;left: 15px;content: '';transform: rotate(136deg);top: 18px;}
.prev.page-numbers::after{transform:rotate(-45deg);left: 19px;}
.prev.page-numbers:hover::after,
.next.page-numbers:hover::after {border-color: #fff;}
.pagination a, .pagination span {display: inline-block;line-height: 48px;text-align: center;border-radius: 50%;margin: 0 5px;background-color: #f0f0f0;color: #000;text-decoration: none;transition: background-color 0.3s ease;}
.pagination .dots {display: inline-block;width: auto;height: 40px;line-height: 40px;text-align: center;margin: 0 5px;background-color: transparent;color: #000;pointer-events: none;}
span.page-numbers.current{display:flex;}
.navbar{border-radius: 0px;}
.navbar, .navbar.active{background: #000000 !important}
.navbar-nav.navbar-right.dropdown.main > a.nav-link.dropdown-toggle{color: #fff !important;}
.navbar-inverse .navbar-nav > li > a,
.nav-link.loginButton.title, .nav-link.title,.nav-link.loginButton,
.nav-link.dropdown-toggle.title{color: #fff !important;}
.navbar .nav > li .dropdown-menu.show{width: 100% !important;background-color: #fff;}
.navbar .nav .dropdown-menu li:hover{background: transparent !important;}
.vm-label {
    font-size: 18px;
    font-weight: 600;
    color: #343434; /* dark pink */
  }

  .vm-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
	justify-content: space-around;
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #F8F8F8;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	border-radius: 12px;
  }
  .info-modal-btn{
	position: static;
	bottom: 0px;
	margin: 8px auto;
	padding: 24px;
	text-align: center;
	background-color: #fff;
	display: block;
  }
  .info-modal-btn.sticky{
	position: sticky;
  }
  .info-modal-btn a {
	background: transparent linear-gradient(90deg, #DB71F6 0%, #7562F4 100%);
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 400;
	font-size: 16px;
  }
  .info-modal-btn a:hover{
	background: transparent linear-gradient(90deg, #7562F4 0%, #DB71F6 100%);;
	color: #fff;
  }
.vm-author, .summary-tool{
	display: flex;
	align-items: center;
	gap: 12px;
}
.vm-author p{
	margin-bottom: 0px;
}
.blog-single #for-video #video-hold .post .summary-tool a:hover{text-decoration: none !important;}
.blog-single #for-video #video-hold .post #image img{width:100%;height:auto;background-size:100%;padding:0px !important;border-radius: 50%;min-height: unset;}
  .vm-tool {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    font-size: 16px;
    text-decoration: none;
    color: #0f172a; /* dark blue-ish */
    transition: transform .15s ease;
  }

  .vm-tool img {
    width: 32px;
    height: 32px;
    object-fit: contain;
	min-height: unset;
	margin-bottom: 0px;
    transition: transform .15s ease;
  }

  .vm-tool:hover img,
  .vm-tool:focus img {
    transform: scale(1.08);
  }
  .vm-label-lg{
	font-size: 12px;
	color: #0D0F0F;
  }

  /* small screens: stack vertically */
  @media (max-width: 640px) {
    .vm-ai-tools {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
	.vm-tools{top: 60px; justify-content: center;}
    .vm-tool span.vm-label-lg {
      display: none;
    }
  }

  /* accessible hidden text */
  .vm-sr-only {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }


/* responsive code */
@media screen and (min-width:992px) and (max-width:1200px){
	.mainCardWrapper{padding: 80px 40px;}
	.mainCardWrapper .container{width: 100%;}
	.card .cardContent .blog-post-title{font-size: 25px;}
	.bannerContent{padding: 0px 50px 0px 40px;}
	.rightSection{width: 100%;padding: 15px;}
	.rightSection h3{font-size: 17px;}
	.rightSection a{font-size: 14px;}
	#tableofcontents{padding: 20px 15px 20px;}
	#for-rel-video .contentDiv{max-width: calc(100% - 150px);}
	.bannerContent h1{font-size: 36px;line-height: inherit;}
}
@media screen and (max-width:991px){
	.navbar.navbar-inverse{border-radius: 0px;}
	.navbar.navbar-inverse img{width: 100%;}
	.navbar .navbar-header{padding:0px 20px;}	
	.card .cardContent .blog-post-title{font-size: 25px;}
	.card .cardContent p{font-size: 14px;}
	.vmakerheroimage{padding: 0px 15px;}
	.bannerContent{padding:30px 50px 30px 50px;width: 100%; flex-direction:column;margin: 15px 0px 0px;}
	.bannerContent h1{font-size: 36px}
	#tableofcontents{display: none;}
	.rightSection{margin: 0px 0px 40px;display: flex;justify-content: space-between;align-items: center}
	/* .rightSection img{display: none;} */
	.bannerImage{display: none;}
	.postPage #navbarCollapse .nav li a{max-width: 100%;}
	.rightSection{width: auto;}
	br{display: none;}
	.rightSection{background-image: unset;background-color: #61D2B2;}
	.dropdown-menu.first-one{padding: 0px !important;}
}
@media screen and (min-width:768px) and (max-width:991px){
	.navbar.navbar-inverse img{width: 100%;}
	.mainCardWrapper{padding:30px;}
	.mainCardWrapper .container{width: 100%;padding:0px;}
	.card .cardImg{min-width: 320px;max-width: 320px;}	
	#for-rel-video .contentDiv{max-width: calc(100% - 150px);}
	.rightSection{width: 100%;}
	iframe{width: 100%;}
	.rightSection img{display: none;}
}
@media screen and (min-width:320px) and (max-width:767px){
	#for-rel-video .single.imagDiv img{width: 100% !important;height: 100% !important;object-fit: contain;}
	.vmakerheroimage .firstbox h1{font-size: 36px;}
	.card{flex-direction: column;}
	.card .cardImg{min-width: 100%;margin-right:0px;margin-bottom: 40px;}
	.bannerSection{flex-direction: column;margin-bottom: 30px;}
	.bannerContent{width: 100%;padding: 20px 30px 20px 30px;margin: 15px 0px 0px;}
	.bannerContent h1{font-size: 29px;line-height: 40px;margin: 40px 0}
	.bannerImage{height: 200px;margin:10px 0;background-repeat: no-repeat;background-size: cover;width:100%;display: none;}
	iframe{width: 100%;height: 300px;}
	.container > .navbar-collapse{margin-left: 0px;margin-right: 0px;}
}
@media screen and (min-width:320px) and (max-width:550px){
	#for-rel-video .single.imagDiv img{width: 100% !important;height: 100% !important;object-fit: contain;}
	.navbar .navbar-header{margin:0px;padding: 0px 5px;}
	.mainCardWrapper{padding: 15px;}
	.card .cardImg{height: 150px;}
	.card .cardContent .blog-post-title{font-size: 20px;}
	.category-tags{display: inline-block;margin: 12px 0;}
	.blog-page-content, #for-video{padding: 0px;}
	.rightSection{margin: auto 10px 40px;flex-direction: column;}
	#for-rel-video{flex-direction: column;}
	#for-rel-video .single.imagDiv{max-width: 100%;margin: 0px 0px 20px;}
	#for-rel-video .contentDiv{max-width: 100%;}
	#subscribe input.email-classname{min-width: 100%;margin: 10px 0;}
	.post img{min-height: 150px;}
	.post h2{font-size: 25px;}
	.page-numbers{margin: 2px;}
	.rightSection{width: auto;}
	iframe{width: 100%;height: 300px;}
}