/* 
Theme Name: Immuno Concepts
Theme URI: https://immunoconcepts.com
Description: Child theme of Hello Elementor, created by Elementor team
Author: Curiouser LLC
Author URI: https://curiouser.design
Template: hello-elementor
Version: 1.0.1
Text Domain: ic
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


/* GLOBAL: STRUCTURE
-------------------------------------------------------------------------------*/
.is-container-narrow {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
.is-container-narrow .wp-block-column {
	flex-grow: 1;
}


/* GLOBAL: LINKS
-------------------------------------------------------------------------------*/
a.elementor-button-link,
a.elementor-button-link:hover {
	text-decoration: none !important;
}
.page-template-default a.wp-block-button__link {
	display: inline-block;
	background-color: #818A91;
	border: 1px solid #000;
	font-weight: 700;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.55);
	line-height: 1;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 3px;
	color: #fff;
	fill: #fff;
	text-align: center;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	text-decoration: none !important;
}
.page-template-default a.wp-block-button__link:hover {
	color: #FFF;
	background-color: #373B41;
}


/* LAYOUT: PAGE
-------------------------------------------------------------------------------*/
.page-template-default .type-page .divider-band {
	background: linear-gradient(#FFF, #EEE);
	border: 0;
	height: 70px;
	margin-bottom: 70px;
	margin-left: calc( -100vw / 2 + 100% / 2 );
	margin-right: calc( -100vw / 2 + 100% / 2 );
	max-width: 100vw;
	width: 100vw;
}
.page-template-default .type-page:after {
	height: 70px;
	width: 100%;
	content: "";
	display: block;
	background: linear-gradient(#FFF, #EEE);
}
.page-template-default .elementor-widget-theme-post-content {
	padding-left: 25px;
	padding-right: 25px;
}


/* CUSTOM STYLES
-------------------------------------------------------------------------------*/
/* HERO */
.is-style-example figure img {
	border-radius: 16px;
	box-shadow: 8px 8px 8px rgba(0,0,0,.3);
}

/* SLIDE GALLERY */
.is-style-slides {
	width: auto;
	margin: 0 auto;
}
.is-style-slides figure {
	max-width: 117px;
	height: 337px;
}
.is-style-slides li {
	align-items: center;
	padding: 10px;
	background: #eee;
}

/* SKU TABLES */
figure.is-style-sku  {
	margin-left: 0;
	margin-right: 0;  
}
.is-style-sku table {
	margin: 2em 0;
}
.is-style-sku table tbody > tr > td,
.is-style-sku table tbody > tr > th {
	padding: 8px 5px;
	background-color: white;
	border-left: none;
	border-right: none;
}
.is-style-sku table tbody tr:hover > td,
.is-style-sku table tbody tr:hover > th {
	background-color: #F0F0F0;
}


/* NINJA FORMS
-------------------------------------------------------------------------------*/
.nf-form-layout {
	border: 1px solid #EEE;
	max-width: 800px;
	margin: 0 auto;
}
.nf-form-content {
	padding: 3% !important;
	border-top: 1px solid #EEE;
}
.nf-form-fields-required {
	text-align: center;
	font-style: italic;
	padding: 1em;
}

/*term and conditions*/
.terms-section{padding: clamp(1.25rem, 0.4167rem + 1.7361vw, 2.5rem) clamp(1.25rem, -1.25rem + 5.2083vw, 5rem);}
/* Blog Css*/
:root {
  /* Colors */
  --primary-color: #76468B;
  --black-color:#000000;
  --white-color: #FFFFFF;
  --gray-color: #67787A;
  --border-color: #e5e7eb;
  --light-color: #f7f3f9;
}
html{
    scroll-behavior: smooth;
}
.col-12{
    padding: 0;
}
.fs-20-24{
    font-size: clamp(1.25rem, 1.0837rem + 0.3469vw, 1.5rem);/* 20px-24px */
}
.blog-banner h1, .bloglisting-banner h1{
    font-size: clamp(1.75rem, 0.669rem + 2.255vw, 3.375rem);/* 28px-54px */
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white-color) !important;
}
.category, .blog-badge{
  display:inline-block;
  padding:8px 16px;
  background:rgba(255,255,255,0.12);
  border-radius:30px;
  font-size:14px;
  margin-bottom:16px;
}
.blog-banner{
    padding: clamp(1.25rem, -2.0761rem + 6.9384vw, 6.25rem);/* 20px-100px */
    background-color: var(--primary-color);
    color: var(--white-color);
}
.meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  opacity:.9;
  font-size: clamp(1rem, 0.9168rem + 0.1735vw, 1.125rem);
}
/* FEATURED IMAGE */
.feature-img{
    width:100%;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    margin-bottom: clamp(1.875rem, 1.0435rem + 1.7346vw, 3.125rem);/*30-50*/
}
.blog-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  padding:60px 0;
}
/* TOC */
.sidebar{
  position:sticky;
  top:30px;
  height:max-content;
}
.toc a{
  display:block;
  padding:10px 0;
  color: var(--gray-color);
  text-decoration:none !important;
  border-bottom:1px solid #eee;
  transition:.3s;
}
.toc a:hover{
  color: var(--primary-color);
}
.toc a.active, .toc a:hover{
    background:rgba(118, 70, 139, 0.12);
    border-radius:8px;
    padding:10px 12px;
    text-decoration: none !important;
}
.blog-card{
  background: var(--white-color);
  border-radius:18px;
  padding:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.blog-card h3{
  margin-bottom:18px;
  color: var(--primary-color);
  font-size: clamp(1.25rem, 1.0837rem + 0.3469vw, 1.5rem);/* 20px-24px */
}
.blog-content{
  background: var(--white-color);
  border-radius:20px;
  padding:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.blog-content h2{
  font-size: clamp(1.5rem, 1.1674rem + 0.6938vw, 2rem);/* 24px-32px */
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  scroll-margin-top: 80px;
}
.blog-content p, .blog-content li, .blog-content a{
    font-size: clamp(1rem, 0.9168rem + 0.1735vw, 1.125rem);/* 16px-18px */
  margin-bottom:18px;
  color: var(--gray-color);
}
.highlight{
  background:rgba(118, 70, 139, 0.12);
  border-left:4px solid var(--primary-color);
  padding:20px;
  border-radius:12px;
  margin:25px 0;
}
@media(max-width:992px){
  .blog-layout{
    grid-template-columns:1fr;
    padding: 20px 0;
  }
  .sidebar{
    position:relative;
  }
  .grid{
    grid-template-columns:1fr;
  }
  .blog-content{
    padding:30px;
  }
}
/* blog listing page css */
.bloglisting-banner{
    padding: clamp(3.125rem, 0.2147rem + 6.0711vw, 7.5rem)  clamp(1.875rem, -1.8669rem + 7.8057vw, 7.5rem);/* 30px-120px */ /*20px-120px*/
    background-color: var(--primary-color);
    color: var(--white-color);
}
.search-box{
display:flex;
background: var(--white-color);
padding:8px;
border-radius:18px;
max-width:620px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
margin-top: 5rem;
}
.search-box form{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.search-box input{
flex:1;
border:none !important;
outline:none;
padding: 0 12px !important;
font-size: clamp(1rem, 0.9168rem + 0.1735vw, 1.125rem);/* 16px-18px */
}
.search-box button, .search-box button:hover{
border:none !important;
background: var(--primary-color) !important;
color: var(--white-color) !important;
padding:12px 22px;
border-radius:14px;
font-weight:600;
cursor:pointer;
}
.bloglisting-content-body{
  padding: clamp(1.25rem, -1.2446rem + 5.2038vw, 5rem) clamp(1.25rem, 2.0815rem + -1.7346vw, 0rem);/* 20px-80px */ /* 20px-0px */
  background-color: var(--light-color);
}
/* FILTER */
.blog-filters{
padding: clamp(0.9375rem, 0.3139rem + 1.301vw, 1.875rem) 0;/* 15px-30px */
margin-bottom: clamp(1.25rem, -1.2446rem + 5.2038vw, 5rem);/* 20px-80px */
}
.chips{ 
display:flex;
gap:12px;
flex-wrap:wrap;
}
.chip{
padding:12px 20px;
background: var(--white-color);
border:1px solid var(--light-color);
border-radius:40px;
cursor:pointer;
transition:.3s;
text-decoration: none !important;
}
.chip.active,
.chip:hover{
background: var(--primary-color) !important;
color: var(--white-color) !important;
text-decoration: none !important;
}
/* MAIN */
.main-layout{
display:grid;
grid-template-columns:1fr 340px;
gap:30px;
padding-bottom:80px;
}
/* BLOG GRID */
.blog-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
}
.bloglisting-card{
background: var(--white-color);
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.3s;
}
.bloglisting-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.bloglisting-card img{
width:100%;
height:240px;
object-fit:cover;
}
.bloglisting-card-content{
padding:24px;
}
.bloglisting-card-category{
font-size: 14px;
font-weight:bold;
color: var(--primary-color);
text-transform:uppercase;
}
.bloglisting-card h3{
font-size: clamp(1.25rem, 1.0837rem + 0.3469vw, 1.5rem);/* 20px-24px */
margin:10px 0;
line-height:1.3;
color:var(--black-color);
}
.bloglisting-card p{
font-size:16px;
color: var(--gray-color);
margin-bottom:18px;
}
.bloglisting-card .meta{
display:flex;
gap:15px;
font-size:12px;
color:var(--gray-color);
margin-bottom:15px;
}
.bloglisting-card .read-btn{
display:inline-block;
padding:10px 18px;
border-radius:40px;
background: var(--light-color);
color:var(--primary-color);
font-weight:600;
text-decoration:none;
}
/* SIDEBAR */
.bloglisting-sidebar{
position:sticky;
top:30px;
height:max-content;
}
.panel{
background: var(--white-color);
padding:24px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
margin-bottom:20px;
}
.panel h4{
margin-bottom:18px;
color:var(--black-color);
}
.panel ul{
list-style:none;
padding: 0;
}
.panel li{
padding:12px 0;
border-bottom:1px solid #eee;
font-size:16px;
}
.panel li a{
    text-decoration: none !important;
}
.panel li:hover{
    background:rgba(118, 70, 139, 0.12);
    border-radius:8px;
    text-decoration: none !important;
    padding: 8px;
}
.panel li:last-child{
border:none;
}
.newsletter input{
width:100% !important;
padding:14px !important;
margin-bottom: 12px !important;
border:1px solid #ddd !important;
border-radius:12px !important;
}
.newslettercta, .panelcta_button{
    display:block;
    box-sizing:border-box;
    width:100%;
    padding:14px;
    border:none !important;
    border-radius:14px;
    font-weight:600;
    cursor:pointer;
    text-shadow: none !important;
    margin: 12px 0 !important;
    text-decoration: none !important;
    text-align: center;
}
.newslettercta, .newslettercta:hover{
background:var(--primary-color) !important;
color: var(--white-color) !important;
text-decoration: none !improtant;
}
.panelcta_button, .panelcta_button:hover{
background:var(--white-color) !important;
color: var(--primary-color) !important;
border: none !important;
text-decoration: none !improtant;
}
.cta{
background:linear-gradient(135deg,var(--primary-color),#a169b9);
color: var(--white-color);
}
.cta h4{color: var(--white-color);}
.cta p{
margin:10px 0 18px;
opacity:.9;
}
@media(max-width:1100px){
  .bloglisting-sidebar{
  position:relative;
  }
  .main-layout{
  grid-template-columns:1fr;}
}
@media(max-width: 600px){
    .bloglisting-card img{
        height: 180px !important;
    }
}
@media(max-width:768px){
  .blog-grid{
  grid-template-columns:1fr;
  }
  .search-box{
  flex-direction:column;
  gap:10px;
  margin-top: 4rem;
  }
  .search-box button{
  width:40%;
  gap: 0;
  }
}