/*  Branding */
 body {
 	font-family: "BrilliantCutProRegular",
 		"Helvetica Neue",
 		Helvetica,
 		Arial,
 		sans-serif;
 	font-size: 1rem !important;
 	color: #2C2C2C !important;
 	height: 100%;
 	overflow-x: hidden;
 }

 a {
 	color: #123632 !important;
 	text-decoration: none !important;
 }

 #section1 {
 	background-color: black;
 	color: #b3b3b3;
 	padding-top: 0.5em;
 	padding-bottom: 0.5rem;

 }

 .myicon {
 	margin: 0.4em;
 }

 .myiconholder {
 	padding: 0;
 }

 .title1 {
 	color: white;
 	font-size: 0.7em;
 	margin-top: 1em;

 }

 .title2 {
 	color: white;
 	font-size: 0.9em;

 }

 .right_title {
 	margin-left: 1em;
 }

 .slogn {
 	font-size: 2em;
 }

 h1 {
 	text-align: center;
 }

 p {

 	color: #999;

 }

 h3,
 h4 {
 	color: #3385ff;
 }

 .grid {

 	border: 1px solid white;
 	margin-bottom: 0;

 }

 .grid_title {
 	background-color: #f2f2f2;
 	text-align: center;
 	color: black;

 }

 .grid_row {
 	margin-top: 0.4em;
 }
 
.bg_banner {
  width: 100%;
  height: 450px;
  background-image: url('../images/banner_srilanka_4.jpg'); /* fallback image */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* WebP Support - override background image if supported */
@supports (background-image: url("image.webp")) {
  .bg_banner {
    background-image: url('../images/banner_srilanka_2.webp');
  }
}



 /* Navigation */

 .nav-link {
 	color: #000;
 	text-decoration: none;
 	transition: text-shadow 0.3s ease !important;
 }

 .nav-link:hover {
 	text-shadow:
 		1px 1px 6px rgba(98, 78, 122, 0.8),
 		/* Deep purple */
 		2px 2px 4px rgba(130, 100, 150, 0.6),
 		/* Mid tone */
 		3px 3px 6px rgba(180, 160, 200, 0.4) !important;
 	/* Pale violet */
 }

 .nav-title {
 	font-size: 1.2rem !important;
 	font-weight: bold !important;
 	height: inherit
 }

 .navbar-default {
 	margin-bottom: 0;
 }

 .affix {
 	top: 0;
 	width: 100%;
 	background-color: #FFF;



 }

 .affix+.container-fluid {
 	padding-top: 70px;
 }


 #section2_reg {
 	background-color: #525252;
 }

 .centered-form {
 	margin-top: 60px;
 }

 .centered-form .panel {
 	background: rgba(255, 255, 255, 0.8);
 	box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
 }

 .butn {
 	background-color: #3385ff;
 }

 .env {
 	margin-left: 0.4em;
 }

 #pass_form {
 	margin: 10px;
 }

 label {
 	font-family: verdana;
 	font-size: 10px;
 }

 .buytype1 {
 	font-family: 'Amatic SC', cursive;
 	font-size: 20px;
 	color: black;
 	font-weight: bold;

 }

 .buytype2 {
 	font-family: 'Amatic SC', cursive;
 	font-size: 40px;
 	color: black;
 	font-weight: bold;

 }

 .buytype3 {
 	font-family: 'Josefin Slab', serif;


 }

 .buytype4 {
 	font-family: 'Josefin Slab', serif;
 	font-size: 40px;
 	color: black;

 }

 .banner {
 	width: 100%;
 	height: 300px;
 	/* Adjust height as needed */
 	background-image: url('images/banner.jpg');
 	/* Replace with your image path */
 	background-size: cover;
 	/* Makes the image cover the entire div */
 	background-position: center;
 	/* Centers the image */
 	background-repeat: no-repeat;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: white;
 	font-size: 2rem;
 	font-family: sans-serif;
 }

 .g-recaptcha {
 	margin-bottom: 1rem;
 }

 .mt-2 {
 	float: right;
 	margin-bottom: 0.5rem;
 	margin-top: 0.5rem;
 }

 .error-msg {
 	color: red;
 	font-size: 0.9em;
 	margin-top: 4px;
 }

 .buytype1,
 .buytype2,
 .buytype3,
 .buytype4 {
 	font-family: 'Roboto', sans-serif !important;
 }

 .pagination li span.disabled {
 	color: #aaa;
 	background-color: #f1f1f1;
 	padding: 6px 12px;
 	border: 1px solid #ddd;
 	border-radius: 4px;
 	cursor: default;
 }

 #counter {
 	border: none;
 	background: transparent;
 	font-weight: bold;
 }

 .form-card {
 	max-width: 850px;
 	margin: auto;
 }


 .left-align {
 	text-align: left;
 }

 .right-align {
 	text-align: right;
 }

 .center-align {
 	text-align: center;
 }

 .xs-padding {
 	padding: 0.25em;
 }

 .sm-padding {
 	padding: 0.5em;
 }

 .md-padding {
 	padding: 1em;
 }

 .lg-padding {
 	padding: 1.5em;
 }

 .xs-margin {
 	margin: 0.25em;
 }

 .sm-margin {
 	margin: 0.5em;
 }

 .sm-margin-bottom {
 	margin-bottom: 0.5em;
 }

 .sm-margin-right {
 	margin-right: 0.5em;
 }

 .md-margin {
 	margin: 1em;
 }

 .lg-margin {
 	margin: 1.5em;
 }

 .gap-1 {
 	margin-right: 0.5em;
 }

 /* Color scheme */
 .buygems-dark-text {
 	color: #620f13 !important;
 }

 .buygems-secondary-text {
 	color: #952335 !important;
 }

 .buygems-success-text {
 	color: #035240 !important;
 }

 .buygems-error-text {
 	color: #881416 !important;
 }

 .buygems-danger-text {
 	color: #881416 !important;
 }

 .buygems-info-text {
 	color: #123632 !important;
 }

 .buygems-bg-primary {
 	color: white !important;
 	background-color: #620f13 !important;
 	border-color: #620f13 !important;
 	box-shadow: 0 0rem 0.5rem #620f13 !important
 }

 .btn-primary {
 	color: white !important;
 	background-color: #620f13 !important;
 	border-color: #620f13 !important;
 }

 .btn-outline-primary {
 	color: #620f13 !important;
 	border-color: #620f13 !important;
 }

 .btn-outline-primary:hover {
 	color: white !important;
 	background-color: #620f13 !important;
 }

 .btn-outline-secondary {
 	color: #952335 !important;
 	border-color: #952335 !important;
 }

 .btn-outline-secondary:hover {
 	color: white !important;
 	background-color: #952335 !important;
 }

 .btn-outline-success {
 	color: #035240 !important;
 	border-color: #035240 !important;
 }

 .btn-outline-success:hover {
 	color: white !important;
 	background-color: #035240 !important;
 }

 .btn-success {
 	color: white !important;
 	border-color: #035240 !important;
 	background-color: #035240 !important;
 }

 .btn-success:hover {
 	color: #035240 !important;
 	border-color: #035240 !important;
 	background-color: transparent !important;
 }

 .btn-outline-error,
 .btn-outline-danger {
 	color: #881416 !important;
 	border-color: #881416 !important;
 }

 .btn-outline-error:hover {
 	color: white !important;
 	background-color: #881416 !important;
 }

 .btn-danger {
 	background-color: #881416 !important;
 	border-color: #881416 !important;
 	color: white !important;
 }

 .btn-danger:hover {
 	color: #881416 !important;
 	border-color: #881416 !important;
 	background-color: white !important;
 }

 .btn-outline-info {
 	color: #123632 !important;
 	border-color: #123632 !important;
 }

 .btn-outline-info:hover {
 	color: white !important;
 	background-color: #123632 !important;
 }

 /* Nav bar */
 .navitem *:hover {
 	background-color: rgba(0, 123, 255, 0.1);
 	/* subtle blue highlight */
 	transition: background-color 0.2s;
 }

 /* Header */
 .bottom-shadow {
 	box-shadow: 1px 3px 14px 4px #1e0300;
 }

 .header-xl {
 	font-size: 3.5em;
 }

 /* Banner */
 .buygems-banner {
 	/* background-color: rgba(207, 68, 65, 0.3) !important; */
 	background-color: rgb(106 182 175 / 45%) !important
 }

 #section1 {
 	background-color: #f4edec;
 	color: #1e0300;
 	/* padding:0.6em; #1e0300;*/
 }

 #section1 a {
 	color: #1e0300;
 }

 #section1 a:hover {
 	color: #620c03ae;
 }

 #section6 {
 	background-color: #f4edec;
 	color: #1e0300;
 }

 /* Shop items */
 .zoom-container {
 	overflow: hidden;
 	border-radius: 1rem;
 }

 .zoom-container img {
 	transition: transform 0.4s ease;
 	display: block;
 	width: 100%;
 }

 .zoom-container:hover img {
 	transform: scale(1.1);
 	/* zooms in */
 }

 #section5 {
 	background-color: #871003ae;
 	padding: 1em;
 }

 .slogn {
 	font-size: 2em;
 }

 h1 {
 	text-align: center;
 }

 p {

 	color: #999;

 }


 input {
 	padding: 2px;
 	color: gray;
 }

 #passstrength {
 	color: red;
 	font-family: verdana;
 	font-size: 10px;
 	font-weight: bold;
 }

 .jum_con {
 	border: 1px solid #3385ff;
 	;

 }

 .jum {
 	padding-top: 25px;
 	padding-bottom: 25px;
 	background-color: white;
 }

 .rightcol {
 	border: 1px solid #3385ff;
 	;

 }

 .adbtn {
 	background-color: #3385ff;
 	;

 }

 .accept {
 	margin-top: 50px;
 }

 #s-btn {
 	margin-top: 5px;
 }

 .limit {
 	line-height: 1.2em;
 	height: 3.6em;
 	overflow: hidden;
 	font-family: 'Josefin Slab', serif;
 }

 .adviewrow {
 	margin-left: .05em;
 	margin-right: .05em;
 	border-bottom: 1px solid #d9dde2;

 }

 .adviewpara2 {
 	float: left;
 	font-family: 'Josefin Slab', serif;
 	font-size: 20px;
 	padding-left: .5em;
 }

 .buytype1 {
 	font-family: 'Amatic SC', cursive;
 	font-size: 20px;
 	color: black;
 	font-weight: bold;

 }

 .buytype2 {
 	font-family: 'Amatic SC', cursive;
 	font-size: 40px;
 	color: black;
 	font-weight: bold;

 }

 .buytype3 {
 	font-family: 'Josefin Slab', serif;


 }

 .buytype4 {
 	font-family: 'Josefin Slab', serif;
 	font-size: 40px;
 	color: black;

 }

 .banner {
 	width: 100%;
 	height: 300px;
 	/* Adjust height as needed */
 	background-image: url('images/banner.jpg');
 	/* Replace with your image path */
 	background-size: cover;
 	/* Makes the image cover the entire div */
 	background-position: center;
 	/* Centers the image */
 	background-repeat: no-repeat;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: white;
 	font-size: 2rem;
 	font-family: sans-serif;
 }

 /* Buy items page */
 .product-card {
 	position: relative;
 	overflow: hidden;
	min-height: 230px !important;
 }

 .product-card img {
 	width: 100%;
 	height: auto;
 	transition: transform 0.3s ease;
 }

 .product-card:hover img {
 	transform: scale(1.05);
 }

 .product-overlay {
 	position: absolute;
 	top: 0;
 	left: 0;
 	height: 100%;
 	width: 100%;
 	background: rgba(207, 68, 65, 0.1) !important;
 	opacity: 0;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	transition: opacity 0.3s ease;
 }

 .product-card:hover .product-overlay {
 	opacity: 1;
 }

 .label-tag {
 	position: absolute;
 	top: 10px;
 	left: 10px;
 	color: white;
 	font-size: 0.75rem;
 	padding: 0.3rem 0.6rem;
 	font-weight: bold;
 	z-index: 2;
 }

 /* .card img {
 	max-height: 250px;
 	object-fit: cover;
 } */

 .fixed-img {
 	height: 400px;
 	width: 100%;
 	object-fit: cover;
 }

 .thumbnail-btn.active {
 	border: 2px solid #2e6141;
 	opacity: 1;
 }

 .thumbnail-btn {
 	cursor: pointer;
 	opacity: 0.7;
 	transition: opacity 0.3s, border 0.3s;
 }

 .image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f0f0f0;
  position: relative;
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transition: opacity 0.3s ease;
  opacity: 0;
  display: block;
 object-position: center center; /* 👈 This centers the visible part */

}

.image-wrapper img.loaded {
  opacity: 1;
}
.img-thumbnail {
	max-height: 6rem !important;
}
.image-wrapper-index {
  aspect-ratio: 4 / 3; 
  width: 100%;
  overflow: hidden;
  background-color: #f0f0f0;
  position: relative;
}

.image-wrapper-index img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block;
}

@media (max-width: 768px) {
  .image-wrapper-index {
    aspect-ratio: 1 / 1;
  }
}

.image-wrapper-index img.loaded {
  opacity: 1;
}
.card-img-top {
    width: 75% !important;
}
.fixed-img:hover  {
  transform: scale(1.05);
}
.btn-check:checked + .btn-outline-primary {
  color: white !important;
  background-color: #620f13 !important;
  border-color: #620f13 !important;
}

.btn-check:focus + .btn-outline-primary {
  box-shadow: 0 0 0 0.25rem rgba(98, 15, 19, 0.5);
}

/* View Ad - Zoom Overlay */
.zoom-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s;
}

.zoom-overlay.active {
	visibility: visible;
	opacity: 1;
}

.zoom-image {
	max-width: 90vw;
	max-height: 80vh;
	transition: transform 0.2s;
}

.zoom-controls {
	position: absolute;
	top: 30px;
	right: 30px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	z-index: 1;
}

.zoom-controls button {
	background: rgba(0, 0, 0, 0.7);
	border: none;
	color: #fff;
	font-size: 1.25rem;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
}

.zoomable {
	cursor: zoom-in;
}