/******************************************************************
  Template Name: Male Fashion
  Description: Male Fashion - ecommerce teplate
  Author: Colorib
  Author URI: https://www.colorib.com/
  Version: 1.0
  Created: Colorib 
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/



*{
	padding: 0;
	margin: 0;
	top: 0;
	box-sizing: border-box;
}
html,
body {
	height: 100%;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Nunito Sans", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Nunito Sans", sans-serif;
	color: #3d3d3d;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 45px;
	text-align: center;
}

.section-title span {
	color: #e53637;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	display: block;
}

.section-title h2 {
	color: #111111;
	font-weight: 700;
	line-height: 46px;
}

.set-bg {
    position: relative;
    right: 0;
    image-rendering: optimizeQuality;
    filter: brightness(100%) contrast(110%) sharpness(20%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top; 
    background-attachment: fixed; 

}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 14px 30px;
	color: #ffffff;
	background: #000000;
	letter-spacing: 4px;
}

.site-btn {
	font-size: 14px;
	color: #ffffff;
	background: #111111;
	font-weight: 700;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #fff;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

li{
	list-style: none;
}



/*---------------------
  Hero
-----------------------*/

.hero__slider.owl-carousel .owl-item.active .hero__text h6 {
	top: 0;
	opacity: 1;

}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text p {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-nav button {
	font-size: 36px;
	color: #333333;
	position: absolute;
	left: 60px;
	top: 50%;
	margin-top: -18px;
	line-height: 29px;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 75px;
}

.hero__items {
	height: auto;
	padding-top: 200px;
	border-radius:24px;
	margin:30px;

}

.hero__text h6 {
    color: #e53637;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 28px;
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.3s ease;
}

.hero__text h2 {
    color: #111111;
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    margin-bottom: 30px;
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.6s ease;
}

.hero__text p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 35px;
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.9s ease;
}

.hero__text .primary-btn {
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 1.1s ease;
}


.hero__text .primary-btn span {
	font-size: 20px;
	position: relative;
	top: 4px;
	font-weight: 700;
}

.hero__social {
	margin-top: 190px;
}

.hero__social a {
	font-size: 16px;
	color: #3d3d3d;
	display: inline-block;
	margin-right: 32px;
}

.hero__social a:last-child {
	margin-right: 0;
}

/*---------------------
  Banner
-----------------------*/

.blog {
	padding-bottom: 55px;
}

.banner__item {
	position: relative;
	overflow: hidden;
}

.banner__item:hover .banner__item__text a:after {
	width: 40px;
	background: #e53637;
}

.banner__item.banner__item--middle {
	margin-top: -75px;
}

.banner__item.banner__item--middle .banner__item__pic {
	float: none;
}

.banner__item.banner__item--middle .banner__item__text {
	position: relative;
	top: 0;
	left: 0;
	max-width: 100%;
	padding-top: 22px;
}

.banner__item.banner__item--last {
	margin-top: 100px;
}

.banner__item__pic {
	float: right;
}

.banner__item__text {
	max-width: 300px;
	position: absolute;
	left: 0;
	top: 140px;
}

.banner__item__text h2 {
	color: #111111;
	font-weight: 700;
	line-height: 46px;
	margin-bottom: 10px;
}

.banner__item__text a {
	display: inline-block;
	color: #111111;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	padding: 3px 0;
	position: relative;
}

.banner__item__text a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #111111;
	content: "";
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*---------------------
  Categories
-----------------------*/

.categories {
    position: relative;
    overflow: hidden;
    height: 500px; 
	margin-bottom: 50px;
	width: 100%;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    overflow: hidden;
}


#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire section */
    transform: translate(-50%, -50%); /* Centers the video */
}


.video-container {
    position: relative;
    z-index: 1; 
    text-align: center; 
    padding: 100px 0; 
}

.video-container h2 {
    color: #fff; 
    font-size: 36px; 
    font-weight: 700;
    margin-bottom: 20px;
}

.video-container p {
    color: #fff; 
    font-size: 18px;
    margin-bottom: 30px;
}

.video-btn {
    background-color: #e53637; /* Button background color */
    color: white; 
    font-size: 16px;
    font-weight: 700;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
}

.video-btn:hover {
    background-color: #c4232b; /* Darker shade on hover */
    transition: background-color 0.3s ease;
}



/*---------------------
  Product
-----------------------*/

.product {
	padding-top: 0;
	padding-bottom: 60px;
}

.filter__controls {
	text-align: center;
	margin-bottom: 45px;
}

.filter__controls li {
	color: #b7b7b7;
	font-size: 24px;
	font-weight: 700;
	list-style: none;
	display: inline-block;
	margin-right: 88px;
	cursor: pointer;
}

.filter__controls li:last-child {
	margin-right: 0;
}

.filter__controls li.active {
	color: #111111;
}


/* Product Card Container */
.home-product-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-product-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.089);
}

.home-product-image img {
    object-fit: cover;
    object-position: top center;
    width: 100%;
    height: 350px;
    border-radius: 10px 10px 0 0;
}

.home-product-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.178);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.home-overlay-icon {
    margin: 10px;
    color: #ffffff;
    font-size: 16px;
    background-color: #000;
    padding: 10px;
    border-radius: 5px;
    transition: color 0.3s ease;
}

.home-product-details {
    padding: 15px;
    text-align: center;
}

.home-product-name {
    font-weight: 600;
    font-size: 1.1em;
    color: #fff;
    text-align: left;
}

.home-product-price {
    position: relative;
    top: -20px;
    color: #000;
    font-weight: 600;
    font-size: 1em;
    text-align: left;
}


/*---------------------
  Shop
-----------------------*/
.shop__sidebar{
   padding: 20px;
}


.shop__sidebar__search {
	margin-bottom: 45px;
}

.shop__sidebar__search form {
	position: relative;
}

.shop__sidebar__search form input {
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	padding-left: 20px;
	border: 1px solid #e5e5e5;
	height: 42px;
}

.shop__sidebar__search form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.shop__sidebar__search form input::-moz-placeholder {
	color: #b7b7b7;
}

.shop__sidebar__search form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.shop__sidebar__search form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.shop__sidebar__search form input::placeholder {
	color: #b7b7b7;
}

.shop__sidebar__search form button {
	color: #b7b7b7;
	font-size: 15px;
	border: none;
	background: transparent;
	position: absolute;
	right: 0;
	padding: 0 15px;
	top: 0;
	height: 100%;
}

.shop__sidebar__accordion .card {
	border: none;
	border-radius: 0;
	margin-bottom: 25px;
}

.shop__sidebar__accordion .card:last-child {
	margin-bottom: 0;
}

.shop__sidebar__accordion .card:last-child .card-body {
	padding-bottom: 0;
	border-bottom: none;
}

.shop__sidebar__accordion .card-body {
	padding: 0;
	padding-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e5e5e5;
}

.shop__sidebar__accordion .card-heading {
	cursor: pointer;
}

.shop__sidebar__accordion .card-heading a {
	color: #111111;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
}

.shop__sidebar__categories ul,
.shop__sidebar__price ul,
.shop__sidebar__brand ul {
	height: 225px;
}

.shop__sidebar__categories ul li,
.shop__sidebar__price ul li,
.shop__sidebar__brand ul li {
	list-style: none;
}

.shop__sidebar__categories ul li a,
.shop__sidebar__price ul li a,
.shop__sidebar__brand ul li a {
	color: #b7b7b7;
	font-size: 15px;
	line-height: 32px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.shop__sidebar__categories ul li a.active,
.shop__sidebar__price ul li a.active,
.shop__sidebar__brand ul li a.active {
    color: #780000; 
    font-weight: bold;
    pointer-events: none; 
}

/* Hover effect applies only to non-active links */
.shop__sidebar__categories ul li a:not(.active):hover,
.shop__sidebar__price ul li a:not(.active):hover,
.shop__sidebar__brand ul li a:not(.active):hover {
    color: #111111; 
}

.shop__sidebar__brand ul {
	height: auto;
}

.shop__sidebar__price ul {
	height: auto;
}

.shop__sidebar__size {
	padding-top: 15px;
}

.shop__sidebar__size label {
	color: #111111;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	border: 1px solid #e5e5e5;
	padding: 6px 25px;
	margin-bottom: 10px;
	margin-right: 5px;
	cursor: pointer;
	background-color: #fff;
	margin-left: 5px;
}

.shop__sidebar__size label.active {
	background: #111111;
	color: #ffffff;
	border-color: #111111;
}

.shop__sidebar__size label input {
	position: absolute;
	visibility: hidden;
}

.shop__sidebar__color {
	padding-top: 15px;
}

.shop__sidebar__color label {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	position: relative;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 10px;
	cursor: pointer;
}



.shop__sidebar__color label:after {
	position: absolute;
	left: -3px;
	top: -3px;
	height: 36px;
	width: 36px;
	border: 1px solid #000;
	content: "";
	border-radius: 50%;
}

.shop__sidebar__color label input {
	position: absolute;
	visibility: hidden;
}

.shop__sidebar__tags {
	padding-top: 15px;
}

.shop__sidebar__tags a {
	color: #404040;
	font-size: 13px;
	font-weight: 700;
	background: #f1f5f8;
	padding: 5px 18px;
	display: inline-block;
	text-transform: uppercase;
	margin-right: 6px;
	margin-bottom: 10px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.shop__sidebar__tags a:hover {
	background: #111111;
	color: #ffffff;
}

.shop__sidebar__accordion .card-heading a:after,
.shop__sidebar__accordion .card-heading>a.active[aria-expanded=false]:after {
	content: "";
	font-family: "FontAwesome";
	font-size: 24px;
	font-weight: 700;
	color: #111111;
	position: absolute;
	right: 0;
	top: 2px;
	line-height: 20px;
}

.shop__sidebar__accordion .card-heading.active a:after {
	content: "";
	font-family: "FontAwesome";
	font-size: 24px;
	font-weight: 700;
	color: #111111;
	position: absolute;
	right: 0;
	top: 2px;
	line-height: 20px;
}

.shop__product__option {
	margin-bottom: 45px;
}

.shop__product__option p {
	color: #111111;
	margin-bottom: 0;
}

.shop__product__option__right {
	text-align: right;
}

.shop__product__option__right p {
	display: inline-block;
	margin-bottom: 0;
}

.shop__product__option__right .nice-select {
	float: none;
	display: inline-block;
	padding: 0;
	line-height: 26px;
	height: auto;
	border: none;
	padding-right: 28px;
}

.shop__product__option__right .nice-select:after {
	border-bottom: 1.5px solid #111111;
	border-right: 1.5px solid #111111;
	height: 8px;
	right: 12px;
	width: 8px;
}

.shop__product__option__right .nice-select span {
	color: #111111;
	font-size: 15px;
	font-weight: 700;
}

.shop__product__option__right .nice-select .list {
	border-radius: 0;
}



/*---------------------
  Footer
-----------------------*/

.footer {
	background: #111111;
	padding-top: 70px;
}

.footer__about {
	margin-bottom: 30px;
}

.footer__about .footer__logo {
	margin-bottom: 30px;
}

.footer__about .footer__logo a {
	display: inline-block;
}

.footer__about p {
	color: #b7b7b7;
	margin-bottom: 30px;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget h6 {
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.footer__widget ul li {
	line-height: 36px;
	list-style: none;
}

.footer__widget ul li a {
	color: #b7b7b7;
	font-size: 15px;
}

.footer__widget .footer__newslatter p {
	color: #b7b7b7;
}

.footer__widget .footer__newslatter form {
	position: relative;
}

.footer__widget .footer__newslatter form input {
	width: 100%;
	font-size: 15px;
	color: #3d3d3d;
	background: transparent;
	border: none;
	padding: 15px 0;
	border-bottom: 2px solid #ffffff;
}

.footer__widget .footer__newslatter form input::-webkit-input-placeholder {
	color: #3d3d3d;
}

.footer__widget .footer__newslatter form input::-moz-placeholder {
	color: #3d3d3d;
}

.footer__widget .footer__newslatter form input:-ms-input-placeholder {
	color: #3d3d3d;
}

.footer__widget .footer__newslatter form input::-ms-input-placeholder {
	color: #3d3d3d;
}

.footer__widget .footer__newslatter form input::placeholder {
	color: #3d3d3d;
}

.footer__widget .footer__newslatter form button {
	color: #b7b7b7;
	font-size: 16px;
	position: absolute;
	right: 5px;
	top: 0;
	height: 100%;
	background: transparent;
	border: none;
}

.footer__copyright__text {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 0;
	margin-top: 40px;
}

.footer__copyright__text p {
	color: #b7b7b7;
	margin-bottom: 0;
}

.footer__copyright__text p i {
	color: #e53637;
}

.footer__copyright__text p a {
	color: #e53637;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	background: url('/img/breadcrumb-bg.jpg');
	background-size: cover;
font-weight: 600;
	padding: 40px 0;
}

.breadcrumb__text h4 {
	color: #111111;
	font-weight: 700;
	margin-bottom: 8px;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #fff;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "";
	font-family: "FontAwesome";
}

.breadcrumb__links span {
	font-size: 15px;
	color: #b7b7b7;
	display: inline-block;
}



/*---------------------
  Clients
-----------------------*/

.clients {
	padding-top: 0;
	padding-bottom: 25px;
}

.client__item {
	display: block;
	margin-bottom: 75px;
	text-align: center;
}

/*---------------------
  Checkout
-----------------------*/

.coupon__code {
	color: #0d0d0d;
	font-size: 14px;
	border-top: 2px solid #77b527;
	background: #f5f5f5;
	padding: 23px 30px 18px;
	margin-bottom: 50px;
}

.coupon__code span {
	margin-right: 15px;
}

.coupon__code a {
	color: #0d0d0d;
}

.checkout__title {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 25px;
	margin-bottom: 30px;
}

.checkout__input {
	margin-bottom: 6px;
}

.checkout__input p {
	color: #111111;
	margin-bottom: 12px;
}

.checkout__input p span {
	color: #e53637;
}

.checkout__input input {
	height: 50px;
	width: 100%;
	border: 1px solid #e1e1e1;
	font-size: 14px;
	color: #b7b7b7;
	padding-left: 20px;
	margin-bottom: 20px;
}

.checkout__input input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.checkout__input input::-moz-placeholder {
	color: #b7b7b7;
}

.checkout__input input:-ms-input-placeholder {
	color: #b7b7b7;
}

.checkout__input input::-ms-input-placeholder {
	color: #b7b7b7;
}

.checkout__input input::placeholder {
	color: #b7b7b7;
}

.checkout__input__checkbox label {
	font-size: 15px;
	color: #0d0d0d;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
	margin-bottom: 16px;
	display: block;
}

.checkout__input__checkbox label input {
	position: absolute;
	visibility: hidden;
}

.checkout__input__checkbox label input:checked~.checkmark {
	border-color: #e53637;
}

.checkout__input__checkbox label input:checked~.checkmark:after {
	opacity: 1;
}

.checkout__input__checkbox label .checkmark {
	position: absolute;
	left: 0;
	top: 3px;
	height: 14px;
	width: 14px;
	border: 1.5px solid #d7d7d7;
	content: "";
	border-radius: 2px;
}

.checkout__input__checkbox label .checkmark:after {
	position: absolute;
	left: 1px;
	top: -3px;
	width: 14px;
	height: 7px;
	border: solid #e53637;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	content: "";
	opacity: 0;
}

.checkout__input__checkbox p {
	color: #0d0d0d;
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 22px;
}

.checkout__order {
	background: #f3f2ee;
	padding: 30px;
}

.checkout__order .order__title {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 25px;
	margin-bottom: 30px;
}

.checkout__order p {
	color: #444444;
	font-size: 16px;
	line-height: 28px;
}

.checkout__order .site-btn {
	width: 100%;
	margin-top: 8px;
}

.checkout__order__products {
	font-size: 16px;
	color: #111111;
	overflow: hidden;
	margin-bottom: 18px;
}

.checkout__order__products span {
	float: right;
}

.checkout__total__products {
	margin-bottom: 20px;
}

.checkout__total__products li {
	font-size: 16px;
	color: #444444;
	list-style: none;
	line-height: 26px;
	overflow: hidden;
	margin-bottom: 15px;
}

.checkout__total__products li:last-child {
	margin-bottom: 0;
}

.checkout__total__products li span {
	color: #111111;
	float: right;
}

.checkout__total__all {
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
	padding: 15px 0;
	margin-bottom: 26px;
}

.checkout__total__all li {
	list-style: none;
	font-size: 16px;
	color: #111111;
	line-height: 40px;
	overflow: hidden;
}

.checkout__total__all li span {
	color: #e53637;
	font-weight: 700;
	float: right;
}




.recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
	text-align: left;
}

.recent__item__pic {
	float: left;
	margin-right: 25px;
}

.recent__item__text {
	overflow: hidden;
}

.recent__item__text h6 {
	color: #111111;
	line-height: 21px;
	font-weight: 700;
}

.recent__item__text span {
	font-size: 13px;
	color: #888888;
}


/*---------------------
  Map
-----------------------*/

.map {
	height: 500px;
}

.map iframe {
	width: 100%;
}


/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}

}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.home-product-image img {
        height: 320px; /* Slightly reduced from 350px */
    }
    .home-product-details {
        padding: 10px;
    }
    .home-product-name {
        font-size: 1em;
    }
    .home-product-price {
        font-size: 0.9em;
        top: -15px;
    }
	.categories__text h2 {
		font-size: 26px;
	}
	.hero__items {
        padding-top: 150px;
        margin: 20px;
    }

	.hero__text h2 {
        font-size: 42px;
        line-height: 50px;
    }
    .hero__text p {
        font-size: 15px;
        line-height: 24px;
    }
    .hero__text h6 {
        font-size: 13px;
    }

    .hero__text .primary-btn {
        font-size: 16px;
        top: 70px;
    }

    .hero__social {
        margin-top: 150px;
    }

    .hero__social a {
        font-size: 14px;
    }
	

	.hero__slider.owl-carousel .owl-nav button {
		left: 2px;
	}

	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 2px;
	}

	.testimonial__text {
		padding: 130px 45px 175px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	.hero__items {
        padding-top: 120px;
        margin: 15px;
    }

	.hero__text h2 {
        font-size: 38px;
        line-height: 45px;
    }
    .hero__text p {
        font-size: 14px;
        line-height: 22px;
    }
    .hero__text h6 {
        font-size: 12px;
    }
    

    .hero__text .primary-btn {
        font-size: 14px;
        top: 50px;
    }

    .hero__social {
        margin-top: 120px;
    }

    .hero__social a {
        font-size: 13px;
    }

	.hero__slider.owl-carousel .owl-nav button {
		left: 2px;
	}

	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 2px;
	}

	.banner__item.banner__item--middle {
		margin-top: 0;
	}

	.banner__item.banner__item--last {
		margin-top: 0;
	}

	.banner__item {
		margin-bottom: 40px;
	}

	.banner {
		padding-bottom: 60px;
	}

	.categories__text {
		margin-bottom: 40px;
	}

	.categories__hot__deal {
		margin-bottom: 40px;
	}

	.shop__sidebar {
		padding-right: 0;
		padding-top: 40px;
	}

	.cart__discount {
		margin-top: 40px;
	}

    .product__filter > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px;
    }
    .home-product-details {
        padding: 10px;
    }
    .home-product-name {
        font-size: 0.95em;
    }
    .home-product-price {
        font-size: 0.85em;
        top: -10px;
    }
}



@media only screen and (max-width: 767px) {
	
	.set-bg {
		position: relative;
		right: 0;
		image-rendering: optimizeQuality;
		filter: brightness(100%) contrast(110%) sharpness(20%);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center; 
		background-attachment: fixed; 
	
	}
	.slicknav_btn {
		display: none;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}

	.slicknav_nav ul {
		margin: 0;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #111111;
		font-weight: 600;
	}

	.slicknav_nav .slicknav_arrow {
		color: #111111;
	}

	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}

	.slicknav_nav {
		display: block !important;
	}


	.hero__text .primary-btn {
		 margin: 30px;
	     padding: 15px;
		 text-align: center;
	}
	

	.search-model-form input {
		width: 100%;
		font-size: 24px;
	}

	.hero__slider.owl-carousel .owl-nav {
        display: none !important;
    }

	.banner__item.banner__item--middle {
		margin-top: 0;
	}

	.banner__item.banner__item--last {
		margin-top: 0;
	}

	.banner__item {
		margin-bottom: 40px;
	}

	.banner {
		padding-bottom: 60px;
	}

	.banner__item__pic {
		float: none;
	}

	.banner__item__pic img {
		min-width: 100%;
	}

	.banner__item__text {
		max-width: 100%;
		position: relative;
		top: 0;
		padding-top: 22px;
	}

	.filter__controls li {
		margin-right: 15px;
	}

	.categories__text {
		margin-bottom: 40px;
	}

	.categories__hot__deal {
		margin-bottom: 40px;
	}

	.shop__product__option__right {
		text-align: left;
		padding-top: 20px;
	}

	.shop__sidebar {
		padding-right: 0;
		margin-bottom: 40px;
	}


	.product__details__breadcrumb {
		text-align: left;
	}


	.product__details__option__size {
		display: block;
		margin-right: 0;
		margin-bottom: 25px;
	}

	.product__details__last__option h5:before {
		width: 440px;
	}


	.shopping__cart__table {
		overflow-y: auto;
	}


	.cart__discount {
		margin-top: 40px;
	}

	.checkout__order {
		margin-top: 20px;
	}

	
	.hero__items {
		text-align: center;
        margin: 30px;	
    }

    .hero__text h6 {
        font-size: 11px;
        margin-bottom: 10px;
        top: 30px;
		
    }

    .hero__text h2 {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 10px;
        top: 30px;
		color: #fff;
    }

    .hero__text p {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 15px;
        top: 30px;
		color: #fff;
    }

    .hero__text .primary-btn {
        font-size: 12px;
        top: 30px;
    }

    .hero__social {
        margin-top: 100px;
    }

    .hero__social a {
        font-size: 12px;
    }
	.home-product-card {
		margin: 0px auto;
		width: 300px;
        height: 300px;
		
    }
	.home-product-overlay {
      
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .home-product-name,
    .home-overlay-icon {
        text-align: center;
    }

	.product-card.row > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
	  }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.cart__total {
		padding: 35px 30px 40px;
	}

	.hero__slider.owl-carousel .owl-nav button {
		left: 15px;
		top: 50%;
	}

	.hero__slider.owl-carousel .owl-nav button.owl-next {
		left: 80px;
		right: 0;
	}

	.hero__items {
        padding-top: 80px;
        margin: 5px;
    }

    .hero__text h6 {
        font-size: 10px;
        margin-bottom: 8px;
        top: 20px;
    }

    .hero__text h2 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 8px;
        top: 20px;
    }

    .hero__text p {
        font-size: 10px;
        line-height: 18px;
        margin-bottom: 10px;
        top: 20px;
    }

    .hero__text .primary-btn {
        font-size: 10px;
        top: 20px;
    }

    .hero__social {
        margin-top: 80px;
    }

    .hero__social a {
        font-size: 10px;
    }


	.product__details__last__option h5:before {
		width: 280px;
	}

	.product__details__cart__option .quantity {
		margin-right: 0;
		margin-bottom: 15px;
	}

	.product__details__last__option h5 span {
		font-size: 16px;
	}


	.categories__text h2 {
		font-size: 30px;
		line-height: 55px;
	}

	.categories__text:before {
		height: 250px;
	}

	.home-product-image img {
		width: 250px;
        height: 250px;
        object-position: center center;
    }
    
    .home-overlay-icon {
   
        padding: 8px;
        font-size: 14px;
    }
    
   
    .home-product-card {
		margin: 0px auto;
		width: 250px;
        height: 250px;
    }


}



/* color option in product details(listing) */


.product__details__option__color {
    display: flex; 
    align-items: center;
    justify-content:center;
    margin-left:190px;
    margin-top:-30px; 
    margin-bottom:20px;
    gap: 10px; 
}

.color-options {
    display: flex; 
    gap: 5px; 
}
.error-message {
	color: red;
	font-size: 14px;
}


/* --------------------------
   Global / Default Styles
----------------------------- */
.container-checkout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
  }
  
  .breadcrumb__text h4 {
	font-size: 28px;
	margin-bottom: 10px;
  }
  .breadcrumb__links a,
  .breadcrumb__links span {
	font-size: 16px;
	margin-right: 10px;
  }
  
  .checkout {
	/* extra vertical padding already via Tailwind py-8 */
	overflow-y: hidden;
  }
  .col-lg-8,
  .col-lg-4 {
	/* Use flex basis for desktop layout */
	padding: 10px;
  }
  .col-lg-8 {
	flex: 0 0 66.66%;
  }
  .col-lg-4 {
	flex: 0 0 33.33%;
  }
  
  .list-group li {
	padding: 12px 16px;
	font-size: 16px;
  }
  .list-group li h6 {
	font-size: 18px;
	margin-bottom: 6px;
  }
  .list-group li strong,
  .list-group li span {
	font-size: 16px;
  }
  
  button, .btn {
	font-size: 16px;
	padding: 10px 16px;
	border-radius: 4px;
  }
  
  .order-details-box,
  .coupon-carousel-container {
	padding: 20px;
	font-size: 16px;
  }
  


  .payment-container {
	width: 100%;
	max-width: 400px;
	background-color: #fff;
	border: 1px dotted #00000062;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	margin: 30px auto; /* Centers the container */
	text-align: center;
}
.payment-container:hover{
	border: 1px solid #000;
}

h2 {
	margin-bottom: 20px;
	font-size: 24px;
	color: #333;
}

.payment-methods {
	margin: 20px 0;
}

.payment-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 15px;
	transition: box-shadow 0.3s ease;
	cursor: pointer;
}

.payment-option:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-option input[type="radio"] {
	appearance: none;
	width: 22px;
	height: 22px;
	border: 2px solid #000;
	border-radius: 50%;
	outline: none;
	margin-right: 15px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.payment-option input[type="radio"]:checked {
	background-color: #000;
	border-color: #000;
}

.payment-option input[type="radio"]:checked::before {
	content: '';
	width: 10px;
	height: 10px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
}

.payment-option label {
	font-size: 16px;
	color: #333;
	cursor: pointer;
	flex: 1;
	text-align: left;
}

.proceed-btn {
	display: none;
	width: 100%;
	padding: 15px;
	background-color: #000;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 20px;
	text-transform: uppercase;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.proceed-btn:hover {
	background-color: #333;
	transform: scale(1.02);
}

.error-message {
	color: red;
	font-size: 14px;
	margin-top: 10px;
}
.wallet-balance{
	font-size: 12px;
	color: green;
}


  /* --------------------------
	 Large Devices (992px - 1199px)
  ----------------------------- */
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
	.container-checkout {
	  padding: 18px;
	}
	.breadcrumb__text h4 {
	  font-size: 26px;
	}
	.breadcrumb__links a,
	.breadcrumb__links span {
	  font-size: 15px;
	}
	.col-lg-8 {
	  flex: 0 0 65%;
	}
	.col-lg-4 {
	  flex: 0 0 35%;
	}
	.list-group li {
	  padding: 10px 14px;
	  font-size: 15px;
	}
	button, .btn {
	  font-size: 15px;
	  padding: 9px 14px;
	}
	.order-details-box,
	.coupon-carousel-container {
	  padding: 18px;
	  font-size: 15px;
	}
  }
  
  /* --------------------------
	 Medium Devices (768px - 991px)
  ----------------------------- */
  @media only screen and (min-width: 768px) and (max-width: 991px) {
	.container-checkout {
	  padding: 16px;
	}
	/* Stack the two columns vertically */
	.container-checkout {
	  flex-direction: column;
	}
	.col-lg-8, .col-lg-4 {
	  flex: 0 0 100%;
	  padding: 8px;
	}
	.breadcrumb__text h4 {
	  font-size: 24px;
	}
	.breadcrumb__links a,
	.breadcrumb__links span {
	  font-size: 14px;
	}
	.list-group li {
	  padding: 8px 12px;
	  font-size: 14px;
	}
	button, .btn {
	  font-size: 14px;
	  padding: 8px 12px;
	}
	.order-details-box,
	.coupon-carousel-container {
	  padding: 16px;
	  font-size: 14px;
	}
  }
  
  /* --------------------------
	 Small Devices (max-width: 767px)
  ----------------------------- */
  @media only screen and (max-width: 767px) {
	.container-checkout {
	  flex-direction: column;
	  padding: 12px;
	}
	.col-lg-8, .col-lg-4 {
	  flex: 0 0 100%;
	  padding: 8px 0;
	}
	.breadcrumb__text h4 {
	  font-size: 22px;
	  text-align: center;
	}
	.breadcrumb__links {
	  text-align: center;
	}
	.breadcrumb__links a,
	.breadcrumb__links span {
	  font-size: 13px;
	  margin-right: 5px;
	}
	.list-group li {
	  padding: 6px 10px;
	  font-size: 13px;
	}
	.list-group li h6 {
	  font-size: 15px;
	}
	button, .btn {
	  font-size: 14px;
	  padding: 8px 12px;
	}
	.order-details-box,
	.coupon-carousel-container {
	  padding: 14px;
	  font-size: 13px;
	}
	/* Ensure the address form and other panels get full width */
	#addressFormContainer {
	  width: 100%;
	  padding: 10px;
	}
  }
  
  /* --------------------------
	 Extra Small Devices (max-width: 479px)
  ----------------------------- */
  @media only screen and (max-width: 479px) {
	.container-checkout {
	  padding: 8px;
	}
	.breadcrumb__text h4 {
	  font-size: 20px;
	}
	.breadcrumb__links a,
	.breadcrumb__links span {
	  font-size: 12px;
	  margin-right: 4px;
	}
	.list-group li {
	  padding: 4px 8px;
	  font-size: 12px;
	}
	.list-group li h6 {
	  font-size: 13px;
	}
	button, .btn {
	  font-size: 12px;
	  padding: 6px 10px;
	}
	.order-details-box,
	.coupon-carousel-container {
	  padding: 10px;
	  font-size: 12px;
	}
	/* Adjust form input heights and font sizes */
	.form-input {
	  height: 40px;
	  font-size: 12px;
	  padding: 0 8px;
	}
	/* Reduce padding for coupon and address sections */
	#coupon-section form,
	#addressFormContainer {
	  padding: 8px;
	}
  }