.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%; /* Adjust as needed */
    height: auto; /* Ensure aspect ratio is maintained */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(96, 88, 88, 0.5); /* Adjust background color and opacity as needed */
}

.overlay:hover {
    opacity: 1;
}

.overlay h4 {
    font-size: 1em; /* Adjust font size as needed */
    margin: 0;
}

.overlay i {
    font-size: 1.5em; /* Adjust font size as needed */
}

div.style-customizer { background-color: #fff;	color:#262626; width: 300px; position: fixed; top: 0; z-index: 10000; right: -300px; box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14); height: 100%; bottom: 0; 

}
.style-customizer a.button:hover { color: #fff !important; }
.style-customizer.closed { box-shadow: none;}
.style-customizer a.button:hover:after { z-index: -1; }
.style-customizer a.button { z-index: 9; }
.style-customizer a.button.button-border { text-transform: uppercase; width: 100%; font-size: 18px;color:#f0e9e9 }
div.style-customizer .buy-button { padding: 24px 16px 21px 20px; text-align: center; display: inline-block; z-index: 2; position: absolute; background: #62110a; width: 100%; }
div.style-customizer .content-chooser {	padding: 90px 22px 30px 30px; overflow-x:hidden; overflow-y: auto;  height: 100%; position: absolute; background-color: #ffffff; border-top: none; }
div.style-customizer.opened .content-chooser { opacity: 1; }
.content-chooser p { margin-bottom: 10px; }
div.style-customizer h2 { margin: 0; font-size: 18px;}
div.style-customizer h3 { font-size: 16px;	margin-top: 30px; line-height: 15px;}
div.style-customizer hr { margin: 15px 0; }
div.style-customizer hr + h3 {	margin-top: 0; }
div.style-customizer a.opener {	display: block;	height: 68px; position: absolute; right: 300px; top: 200px;     background: #ffffff; width: 68px;	font-size: 20px; line-height: 45px;	color: #777777;	text-align: center;text-decoration: none;border:5px;box-shadow: -5px 0 15px 0px rgba(0, 0, 0, 0.10);  }
div.style-customizer.opened a.opener {	left: -67px; border-color: transparent; }
div.style-customizer ul {	list-style: none;	margin: 0;	padding: 5px 0 0 0;	font-size: 0;}
div.style-customizer ul li { float: left; width: 25px; height: 25px; position: relative;	display: inline-block;	cursor: pointer; margin: 0 3px 3px 0; -webkit-transition: all linear 0.3s;	-moz-transition: all linear 0.3s; -o-transition: all linear 0.3s;	-ms-transition: all linear 0.3s;	transition: all linear 0.3s;}
div.style-customizer ul.layoutstyle li { width: 45%; height: 30px;	margin-right: 5px;	color: #666666;	background-color: #f1f1f1;	border: 1px solid #f3f3f3;	font-size: 13px; text-align: center; padding-top: 5px;}
div.style-customizer ul.layoutstyle li i {	color: #cccccc;	font-size: 11px;}
div.style-customizer ul.layoutstyle li.selected {	border: 1px solid #aaaaaa;}
div.style-customizer ul.layoutstyle li.selected i {	color: #666666;}
div.style-customizer ul.footerChange li {width: 45%; height: 30px;	margin-right: 5px;	font-size: 13px; padding: 6px 14px 0;}
div.style-customizer ul.footerChange li.dark {	color: #f1f1f1;	background-color: #262626;}
div.style-customizer ul.footerChange li.light {	color: #333333;	background-color: #f7f7f7;}
div.style-customizer ul.footerChange li i {	width: 20px;}
div.style-customizer ul.patternChange li { border: 1px solid #f3f3f3; }
div.style-customizer ul.patternChange li.pattern-0.selected:after, div.style-customizer ul.patternChange li.pattern-1.selected:after, div.style-customizer ul.patternChange li.pattern-2.selected:after, div.style-customizer ul.patternChange li.pattern-3.selected:after, div.style-customizer ul.patternChange li.pattern-4.selected:after {color: #333333;}
div.style-customizer ul.patternChange li.selected:after {color: #ffffff;}
div.style-customizer ul li.selected { border:3px solid #000;}
div.style-customizer ul.resetAll li { width: 100%; padding: 6px 0; min-width: 0; text-align:center;	margin-top:30px;}
div.style-customizer .btn a {	text-decoration: none;	color: #ffffff;}
div.style-customizer select {width: 100%; padding: 5px;	border: 1px solid #b2bfca;}

/*Color Skins*/


/* Make spinner white */
.style-customizer .buy-button .opener .fa-cog {
    color: white; /* Set color to white */
  }
    
  
  /* Style the "Give Back" button hover state */
  .style-customizer .buy-button .button:hover {
    background-color: #222; /* Change button color on hover */
  }
  
/* Adjust position for smaller screens */
@media (max-width: 768px) {
    div.style-customizer a.opener {
        right: 315px;
    }
}

/* Adjust position for larger screens */
@media (min-width: 992px) {
    div.style-customizer a.opener {
        right: 300px;
    }
}