/*Example Css*/
.shelf-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px; /* Example margin */
}
/* Example CSS for responsive layout */

/* Default styles */
.container {

	
	    max-width: 1000px;
	width: 1000px;
    margin: 0 0 0 auto; /* Center the container */
	padding-bottom: 20px; 
    padding: 0 0px; /* Add padding to keep content away from edges */
	background-color: #ffffff;
	
	display: flex;
        justify-content: space-between;
       /* Set to 80% on larger screens */
       
        padding: 10px;
        flex-wrap: wrap; /* Allows items to wrap on smaller screens */
	
}

  
        
    

    @media (max-width: 768px) { /* Adjust breakpoint as needed */
        .container {
            max-width: 100%; /* Set to 100% on mobile screens */
        }
    }

.row {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Wrap items to new line on smaller screens */
}

.col-md-4 {
    flex: 0 0 33.33%; /* Sidebar takes 33.33% width on larger screens */
    max-width: 33.33%; /* Sidebar max width */
}

.col-md-8 {
    flex: 0 0 66.67%; /* Main content takes 66.67% width on larger screens */
    max-width: 66.67%; /* Main content max width */
}
.blogimage-header{
  position: relative;
	  max-width: 100%; /* Adjust maximum width of the image */
    height: auto;
    margin-right: 30px; /* Margin between image and text */
    border-radius: 5px;
    display: block;
	padding:2px;
}

.image-text{
  background-color:rgba(255, 255, 255, .8);
  padding:1px;font-size:40px;
	
  text-align:center;
  position: absolute;
  top:80%;
  right:50%; width:100%;
	
  transform:translate(50%, -50%);
}
	.image-text h1{
  background-color:rgba(255, 255, 255, .1);
  
  
}
.blog-post-image {
    max-width: 100px; /* Adjust maximum width of the image */
    height: auto;
    margin-right: 30px; /* Margin between image and text */
    border-radius: 5px;
    display: block;
	padding:2px;
}

.blog-post-content {
    flex: 1; /* Take up remaining space */
	 align-content: flex-start;
	margin: 0px; 
	
	
}

.blog-post-content h1 h2 h3 h4 h5 h6 a{
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
	
}
.blog-post-content a {
color: var(--color-primary);
}

.blog-post-content p {
   
    line-height: 1.3;
    color: #555;
    margin: 0;
	font-size:16px;
	text-wrap:pretty;
	
	
	text-align: left;
    			    			
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

	

	

	

	

	
}

.sidebar {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    
}

.sidebar h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.latest-blog-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 5px;
}

.sidebar .latest-blog-post img {
    width: 70px; /* Adjust image width */
    height: 80px;
    border-radius: 5px;
    margin-right: 20px;
}

.sidebar .latest-blog-post h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
}

.sidebar .latest-blog-post p {
    font-size: 1em;
    line-height: 1.4;
    color: #666;
    margin-bottom: 0;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    .row {
        flex-direction: column; /* Stack items vertically on smaller screens */
    }

    .col-md-4, .col-md-8 {
        flex: 1 0 auto; /* Reset width to auto for full width on smaller screens */
        max-width: 100%; /* Full width on smaller screens */
    }

    .sidebar {
        order: 3; /* Place sidebar below main content */
    }

    .col-md-8 {
        order: 1; /* Place main content above sidebar */
    }
}


.widgetcard {
    
    padding: 0;margin:0;
	
	width: 100%;
    margin-bottom: 2px;
    border-radius: 5px;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
	border-bottom:2px solid #f2f2f2;
}

.widgetcard h1,h2,h3{
  
    font-weight: bold;
	font-size: 20px;
     color: var(--color-primary);
    text-transform: capitalize;
	margin-bottom: 10px;padding:5px
	
	
}



.widgetcard-post {
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
	width: 100%; padding:0px;
	margin-bottom: 5px;padding:0px
	 font-size: 25px;
    color: #555;
 
	
}
	


.widgetcard-image {
    width: 100%; /* Adjust width as needed */
	
    height: 150px; /* Adjust height as needed */
    overflow: hidden;
    border-radius: 2px 0px 0 0;
	
}

.widget-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.widget-content {
    background-color: #f9f9f9;
    padding: 5px;
    border-radius: 0 0 8px 8px;
	margin:0;
	width: 100%;
}

.widget-content h4 {
    font-size: 15px;
    font-weight: bold;
     color: var(--color-primary);
    margin-bottom: 5px;
	
}

.widget-content p {
    font-size: 20px;
    color: #555;
    margin-bottom: 0;
	width: 100%;
}
.blog-post-item {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-bottom: 2px solid #f2f2f2;
}

.blog-post-item h2 { font-size: 15px;}
/* Custom styles for tags */




/* Home and Blog Page START */

.blog-posthome-item {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-bottom: 2px solid #f2f2f2;
}


.blog-posthome-image {
    max-width: 90px; /* Adjust maximum width of the image */
    height: auto;
    margin-right: 8px; /* Margin between image and text */
    border-radius: 5px;
    display: block;
	padding:2px;
}

.blog-posthome-content {
    flex: 1; /* Take up remaining space */
	 align-content: flex-start;
	margin:-20px;
}

.blog-posthome-content h2 {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.blog-posthome-content p {
    font-size: 130%;
    line-height: 1.4;
    color: #555;
    margin-bottom: 5px;
}
/* Home and Blog Page START */

.tag {

    display: inline-block;
   /* background-color: #f2f2f2; /* Blue color for tag background */
    color: var(--color-primary); /* White text color */
   /* padding: 2px 2px; /* Padding around the tag text */
	padding: .1em;
    margin-right: 5px; /* Margin between tags */
  /*  border-radius: 3px; /* Rounded corners */
    text-decoration: none; /* Remove underline from links */
    font-size: 16px; /*border:1px outset #f5f5f5;
	
	9deg, #f9fcff 0%, #dee4ea 74%);
	border-radius: 0 5em 5em;*/
 
  
}
.tag:hover {
    background-color:var(--color-primary); /* Darker blue color on hover */
    color: #fff; /* White text color on
	hover */font-size:20px; border-radius:5px;
	
	
		
		border-bottom: 1px solid tomato;
		
		transition: 0.4s;
	text-decoration: none;
}
.tag:last-child {
    margin-right: 2px; /* No margin on the last tag */
	
}


.cats {

    display: inline-block;
    
    color: #000; /* White text color */
    padding: 3px 3px; /* Padding around the cat text */
    margin-right: 5px; /* Margin between cats */
    border-radius: 6px; /* Rounded corners */ width:100%;
    text-decoration: none; /* Remove underline from links */border:#F5F5F5 solid 1px;
	
    font-size: 16px; /* Adjust font size */
}

.cats a{color: var(--color-primary);}


CSS.mb-6 {
  margin-bottom: 4.5rem !important;
}
.mb-7 {
  margin-bottom: 6rem !important;
}
.mb-8 {
  margin-bottom: 7.5rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-7 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10.5rem !important;
  padding-bottom: 10.5rem !important;
}
.hcf-bp-center {
  background-position: center !important;
}
.hcf-bs-cover {
  background-size: cover !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 6rem !important;
  }
  .mb-sm-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-sm-9 {
    margin-bottom: 9rem !important;
  }
  .mb-sm-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-sm-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-sm-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-sm-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-md-7 {
    margin-bottom: 6rem !important;
  }
  .mb-md-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-md-9 {
    margin-bottom: 9rem !important;
  }
  .mb-md-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-md-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-md-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-md-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-md-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-lg-7 {
    margin-bottom: 6rem !important;
  }
  .mb-lg-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-lg-9 {
    margin-bottom: 9rem !important;
  }
  .mb-lg-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-lg-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-lg-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-lg-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-lg-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xxl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xxl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xxl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xxl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xxl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xxl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xxl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xxl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
.hcf-overlay {
  --hcf-overlay-opacity: 0.5;
  --hcf-overlay-bg-color: var(--bs-black-rgb);
  position: relative;
}
.hcf-overlay::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    var(--hcf-overlay-bg-color),
    var(--hcf-overlay-opacity)
  );
  z-index: 0;
}
.hcf-overlay > * {
  position: relative;
  z-index: 1;
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}




[aria-label="gallery"] {
  border: 2px solid;
  padding: 1rem;
  overflow-x: scroll;
}

[aria-label="gallery"]:focus {
  outline: 4px solid DodgerBlue;
  outline-offset: -6px;
}

[aria-label="gallery"] ul {
  white-space: nowrap;
}

[aria-label="gallery"] li {
  display: inline-block;
  margin-right: 1rem;
}

[aria-label="gallery"] img {
  max-height: 40vh;
}

.instructions p {
  padding: 1rem;
  text-align: center;
  color: #fefefe;
  background-color: #111;
}

#focus, #hover, #hover-and-focus {
  display: none;
}

[aria-label="gallery"]:focus + .instructions #focus,
[aria-label="gallery"]:hover + .instructions #hover {
  display: block;
}

[aria-label="gallery"]:hover + .instructions #hover + #focus {
  display: none;
}

[aria-label="gallery"]:hover:focus + .instructions #hover-and-focus {
  display: block;
}

[aria-label="gallery"]:hover:focus + .instructions #hover-and-focus ~ * {
  display: none;
}

.instructions svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
  vertical-align: -0.5rem;
}

/* just page styles */

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


  .glide {

            width: 100%;

            height: 100%;

        }

        .glide__slide {

            text-align: center;

            font-size: 18px;

            background: #fff;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .widget-blog-post.card {

            width: 80%;

            margin: 0 auto;

        }

        .widget-content {

            padding: 15px;margin:0;
			

        }

  
.grid-containertop {
  display: grid;
  grid-template-columns: 33% 33% 33%;
	margin:6px;
	 padding: 3px;
}

.card {
    border: 0px solid #ddd;
    border-radius: 0px;
    overflow: hidden;
	margin:0 auto;
	
	width: 100%;

           
}

.card-img-top {
    width: 100%;
    height: auto;
}

.card-body {
    padding: 1px;margin:1px;
	
}

.card-title a h3 {
    color: var(--color-primary);
    text-decoration: none; font-weight:900;
	
}

.card-title a:hover {
    text-decoration: underline;
}
.buttonbuy a {color:#000;}
.buttonbuy {
    text-decoration: none;
    font-size: .85rem;
	
    line-height: 1.4em;
    padding: 7.8px 16px;
    margin-top: 6px;
    margin-bottom: 6px;
    display: inline-block;
    font-weight: 600;
    outline: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color ease-in-out 120ms, filter ease-in-out 120ms, box-shadow ease-in-out 120ms;
    box-shadow: none;
    background-color: #ffbf00;
    color: #000;
	content: "•";
    border: 1px solid #000000;
    vertical-align: top;
}

.categories-list {
        list-style-type: none;
        padding: 0;
    }

    .categories-list > li {
        margin-bottom: 10px;
    }

    .categories-list a {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
    }

    .categories-list a:hover {
        text-decoration: underline;
    }

    .categories-list ul {
        list-style-type: none;
        padding-left: 20px;
        margin-top: 5px;
    }

    .categories-list ul li {
        margin-bottom: 5px;
    }

    .categories-list ul li a {
        font-weight: normal;
        color: #343a40;
    }

    .categories-list ul li a:hover {
        color: #007bff;
    }

/*BLOG SLIDER*/

    

.new-blogs-slider {
    display: flex;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    position: relative;
    max-width: 100%;
}

.blog-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    transition: transform 0.5s ease-in-out;
    text-align: center;
    flex: 0 0 100%;
}

.blog-slide img {
    width: 100%;
    height: auto;
}

@keyframes slide {
    0% { transform: translateX(0); }
    10% { transform: translateX(-100%); }
    20% { transform: translateX(-200%); }
    30% { transform: translateX(-300%); }
    40% { transform: translateX(-400%); }
    50% { transform: translateX(-500%); }
    60% { transform: translateX(-600%); }
    70% { transform: translateX(-700%); }
    80% { transform: translateX(-800%); }
    90% { transform: translateX(-900%); }
    100% { transform: translateX(-1000%); }
}

.new-blogs-slider {
    animation: slide 25s infinite linear;
}



.sticky
{
	

  --f: 15px; /* control the folded part */
  
  position: absolute;
  top: 0;
	
  color: #fff;
  padding: .1em 1.8em;
  background: var(--color-primary)/*var(--c,#45ADA8)*/;
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}
.right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}
.left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* a fix for firefox that show some strange lines*/
@supports (-moz-appearance:none) {
  .ribbon {
    background:
      linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,
      linear-gradient(var(--c,#45ADA8) 0 0) 50%/
       calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
    border-bottom-color: #0000;
   }
	/*
	--f: 7px; /* control the folded part*/
 /* --r: 5px; /* control the ribbon shape */
  /*--t: 2px; /* the top offset */
  
  /*position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  /*padding: 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: var(--color-primary);color:white;font-weight:bolder;
	
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}
.left {
  inset: 0 auto auto 0;
  transform-origin: 100% 0;
  transform: translate(-29.3%) rotate(-45deg);
}
.right {
  inset: 0 0 auto auto;
  transform-origin: 0 0;
  transform: translate(29.3%) rotate(45deg);
}




/*SOCIAL SHARER*/

    .share-btn {
    display: inline-block;
    color: #fff;
    padding: 6px 10px;
		width:800;
  height:172px;
		
		
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.share-btn:hover {
    opacity: 80%;
}

.twitter {
    background-color: #1da1f2;
	
}

.facebook {
    background-color: #3a579a;
}

.pinterest {
    background-color: #cd1c1f;
}

.linkedin {
    background-color: #007AB6;
}

.reddit {
    background-color: #FF4500;
}





	

		header { 
			background-color: #ffffff; 
			color: #000000; 
			text-align: center; 
			
		}

		
		
}

article p {
	
	font-size:16px;
	

}
main {
	flex: 3;
}

article {
	margin-bottom: 3px;
	padding: 3px 5px;
	
	margin-right: 15px;
	
	text-align:left;
	letter-spacing: 0px;
	font-size:16px;
	
	
}
.container { display: flex; justify-content: space-evenly; max-width: 100%; margin: 0 auto; padding: 10px; flex-wrap: wrap; /* Allows items to wrap on smaller screens */}

article h3, h1 {
	
  
  
 font-size:26px;
  padding:0 0 0 0;
  color:var(--color-primary);
  font-weight:bolder;
  -moz-box-shadow:none;  
  -webkit-box-shadow: none;  
  box-shadow:none;  
 
  display:block;
 
  min-width:800;
  max-height:172px;
  max-width:800px;  
  

line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
	
	margin-right: 20px;font-weight:bold; background-color:#fff;
	
	
}

aside{
	flex: 1;
	background-color: white;
	padding: 0; margin:0 auto;
	
	
	
	
}

/* Responsive styles */
@media (max-width: 768px) {
	.container {
		flex-direction: column; /* Stacks items vertically on small screens */
	}

	main, aside {
		flex: 1 100%; /* Takes full width */
		margin: 0 auto; /* Remove margin on smaller screens */
		
    padding: 0;
	
}

@media (max-width: 480px) {
	.container {
		padding: 10px;margin: 0 auto;
		
	}

	article {
		padding: 10px;
	}

.alert {
    color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 10px;
    border-radius: 5px;
    background-color: #ffe6e6;
}

.alert ul {
    list-style-type: none;
    padding-left: 0;
}

.alert li {
    margin: 5px 0;
}
	.blogcard
	{
		width:100%;
   height:200px;
background-color: blue;
		
/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}