/* Preloader */
		.preloader {
		position: fixed;
		top: 0;
		/* left: 0; */
		z-index: 999999999;
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
		}
		.preloader-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		}
		.preloader-icon {
		width: 100px;
		height: 100px;
		display: inline-block;
		padding: 0px;
		}
		.preloader-icon span {
		position: absolute;
		display: inline-block;
		width: 100px;
		height: 100px;
		border-radius: 100%;
		background:#04345a;
		-webkit-animation: preloader-fx 1.6s linear infinite;
		animation: preloader-fx 1.6s linear infinite;
		}
		.preloader-icon span:last-child {
		animation-delay: -0.8s;
		-webkit-animation-delay: -0.8s;
		}
		@keyframes preloader-fx {
		0% {transform: scale(0, 0); opacity:0.5;}
		100% {transform: scale(1, 1); opacity:0;}
		}
		@-webkit-keyframes preloader-fx {
		0% {-webkit-transform: scale(0, 0); opacity:0.5;}
		100% {-webkit-transform: scale(1, 1); opacity:0;}
		}
		/* End Preloader */

		.btn {
			align-items: center;
			text-align: center;
			position: relative;
			font-weight: 500;
			font-size:14px;
			color: #fff;
			background: #333;
			display: inline-block;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			z-index: 5;
			display: inline-block;
			/* padding: 13px 32px; */
			border-radius: 0px;
			text-transform:uppercase;
		}
		.btn:hover{
			color:#fff;
			background:#04345a;
		}
		#scrollUp {
			right: 10px;
			z-index: 33;
			bottom: 10px;
			text-align: center;
		}
		#scrollUp i{
			height: 40px;
			width: 40px;
			line-height: 40px;
			background:transparent;
			background:#222;
			border-radius: 0;
			font-size: 18px;
			-webkit-transition: all 500ms ease;
			-moz-transition: all 500ms ease;
			transition: all 500ms ease;
			display:block;
			color: #fff;
			box-shadow: 0px 4px 19px #00000038;
		}
		#scrollUp i:hover{
			background:#04345a;
			color:#fff;
		}
		/*======================================
			01. Header CSS
		========================================*/
		/* Topbar */
		.topbar {
			background-color: #fff;
			border-bottom: 1px solid #e2e2e2;
			/* padding: 15px 0; */
		}
		/* Logo */
		.header .logo {
			padding-top: 15px;
			width: 100%;

		}
		.header .navbar {
			padding: 0;
		}
		/* Main Menu */
		.navbar-expand-lg .navbar-collapse{
			display:block !important;
		}
		.header.v3 .navbar-expand-lg .navbar-collapse{
			display:block !important;
			background:#04345a;
		}
		.header .nav li a i {
			margin-left: 6px;
			font-size: 10px;
		}
		/* Dropdown Menu */

		.header .nav li:hover .dropdown{
			opacity:1;
			visibility:visible;
			transform:translateY(0px);
		}
		.header .nav li .dropdown li{
			float:none;
			margin:0;
		}
		.header .nav li .dropdown li a {
			padding: 8px 15px;
			color: #666;
			display: block;
			font-weight: 400;
			text-transform: capitalize;
			background: transparent;
		}
		.header .nav li .dropdown li a:before{
			display:none;
		}
		.header .nav li .dropdown li:last-child a{
			border-bottom:0px;
		}
		.header .nav li .dropdown li:hover a{
			color:#fff;
			background:#04345a;
		}
		.header .nav li .dropdown li a:hover{
			border-color:transparent;
		}
		.header .nav li .dropdown li i {
			float: right;
			margin-top: 8px;
			font-size:10px;
			z-index:5000;
		}

		.mobile-search{
			display:none;
		}
		.header.shop .topbar {
			border: none;
		}
		.header.shop .nav-inner {
			margin-right: 188px;
		}
		.header.shop .logo {
			float: inline-start;
		}
		.header.shop .top-contact {
			margin-top:0px;
		}
		.header.shop .topbar p {
			color: #ccc;
		}
		.header.shop .topbar .login a {
			color: #04345a;
		}

		.header.shop .right-content{
			/* float: inline-end; */
			float: inline-end;

		}

		.header.shop .nav li {
			margin-right: 40px;
			position: relative;
		}
		.header.shop .nav li {
			margin-right: 38px;
			position: relative;
		}
		.header.shop .nav li:last-child {
			margin: 0 !important;
		}

		/* Shopping Cart */
		.header .shopping {
			display: inline-block;
			z-index: 9999;
		}
		.header .shopping .icon {
			position: relative;
			cursor:pointer;
			color:#222;
		}
		.header .shopping .shopping-item {
			position: absolute;
			top: 68px;
			width: 300px;
			background: #fff;
			padding: 20px 25px;
			transition: all 0.3s ease 0s;
			transform: translateY(10px);
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			opacity: 0;
			visibility: hidden;
			z-index: 99;
		}

		:dir(ltr) .header .shopping .shopping-item {
			right: 0;
			left: auto;
		}

		:dir(rtl) .header .shopping .shopping-item {
			left: 0;
			right: auto;
		}

		.header .shopping:hover .shopping-item{
			transform: translateY(0px);
			opacity:1;
			visibility:visible;
		}
		.header .shopping .dropdown-cart-header{
			padding-bottom: 10px;
			margin-bottom: 15px;
			border-bottom:1px solid #e6e6e6;
		}
		.header .shopping .dropdown-cart-header span {
			text-transform: uppercase;
			color: #222;
			font-size: 13px;
			font-weight: 600;
		}
		.header .shopping .dropdown-cart-header a {
			float: right;
			text-transform: uppercase;
			color: #222;
			font-size: 13px;
			font-weight: 600;
		}
		.header .shopping .dropdown-cart-header a:hover{
			color:#04345a;
		}
		.header .shopping-list li {
			overflow: hidden;
			border-bottom: 1px solid #e6e6e6;
			padding-bottom: 15px;
			margin-bottom: 15px;
			position:relative;
		}
		.header .shopping-list li .remove {
			position: absolute;
			/* left: 0; */
			bottom: 16px;
			margin-top: -20px;
			height: 20px;
			width: 20px;
			line-height: 18px;
			text-align: center;
			background: #fff;
			color: #222;
			border-radius: 0;
			font-size: 11px;
			border: 1px solid #ededed;
			border-radius: 20px	;
		}
		.header .shopping-list li .remove:hover{
			background:#222;
			color:#fff !important;
			border-color:transparent;
		}

		.header .shopping-list .cart-img img {
			width: 70px;
			height: 70px;
			border-radius:0;
			
		}
		.header .shopping-list .cart-img:hover img{
			transform:scale(1.09);
		}
		.header .shopping-list .quantity{
			line-height: 22px;
			font-size: 13px;
			padding-bottom: 30px;
		}
		.header .shopping-list h4 {
			font-size: 14px;
		}
		.header .shopping-list h4 a {
			font-weight: 600;
			font-size: 13px;
			color: #333;
		}
		.header .shopping-list h4 a:hover{
			color:#04345a;
		}
		.header .shopping-item .bottom {
			text-align: center;
		}
		.header .shopping-item .total {
			overflow:hidden;
			display: block;
			padding-bottom: 10px;
		}
		.header .shopping-item .total span {
			text-transform:uppercase;
			color:#222;
			font-size:13px;
			font-weight:600;
			float: inline-end;
		}
		.header .shopping-item .total .total-amount {
			float: inline-end;
			font-size:14px;
		}
		.header .shopping-item .bottom .btn {
			background: #222;
				/* padding: 10px 20px; */
			display: block;
			color: #fff;
			margin-top: 10px;
			border-radius: 0px;
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 500;
		}
		.header .shopping-item .bottom .btn:hover{
			background:#04345a;
			color:#fff;
		}
		.header.shop{
			background:#fff;
		}
		.header.shop .nav-inner {
			margin: 0;
		}
		.header.shop .topbar {
			background-color: #fff;
			border: none;
		}
		.header.shop.v3 .topbar{
			padding:0;
		}
		.header.shop.v3 .topbar .inner-content{
			border-bottom:1px solid #eee;
			padding: 12px 0px;
		}
		.header.shop .right-nav li a {
			color: #333;
		}

		.header.shop .top-contact {
			margin-top:0px;
		}
		/* Header Middle */
		.header.shop .search-bar-top {
			text-align: center;
			margin-top: 15px;
		}
		.header.shop .search-bar {
			margin-top: 3px;
			width: 250px;
			height: 25px;
			/* display: inline-block; */
			background: #fff;
			position: relative;
		}


		.header.shop .search-bar form {
			/* display: inline-block; */
			width: 260px;
		}
		.header.shop .search-bar input {
			height: auto;
			background: transparent;
			color: #666;
			border-radius: 0;
			border: none;
			font-size: 14px;
			font-weight: 400;
			padding: 0 25px 0 20px;
			width: 328px;
		}

		.header.shop .search-bar .btnn:hover{
			color:#fff;
			background:#2bc700;
		}
		/* Search Form */
		.header.shop .search-top {
			opacity: 1;
			visibility: visible;
			top: 0;
			background: transparent;
			border: none;
			box-shadow: none;
			padding: 0;
			top: 0;
		}
		.header.shop .middle-inner {
			background: #fff;
			border-top: 1px solid #eee;

		}

		.header.shop .header-inner {
			background: #04345a;
			
		}
		.header.shop .logo-img {
			content: url('/uploads/mas/maspay-wht.webp'); 
			width: 140px;
			height: auto;
		}

		.header.shop.sticky .logo-img {
			content: url('/uploads/mas/maspay.webp');
			width: 140px;
			height: auto;
		}


		.header.shop .topbar p {
			color: #333;
		}

		.header.shop .nav li {
			margin-right: 40px;
			float: left;
			position: relative;
		}
		.header.shop .nav li {
			margin-right:5px;
			position: relative;
			float: none;
		}
		.header.shop .nav li:last-child{
			margin-right:0;
		}
		.header.shop .nav li .new {
			background: #04345a;
			color: #fff;
			text-transform: uppercase;
			font-size: 9px;
			position: absolute;
			left: 21px;
			top: 2px;
			font-weight: 500;
			height: 18px;
			line-height: 18px;
			text-align: center;
			display: block;
		}
		.header.shop.v2 .nav li a{
			color:#333;
		}
		.header.shop .nav li a {
			color: #fff;
			text-transform: capitalize;
			font-size: 15px;
			padding: 20px 15px;
			font-weight: 500;
			display: block;
			position: relative;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.header.shop .nav li:hover a{
			color:#fff;
			background:#04345a;
		}
		.header.shop.v2 .nav li:hover a{
			color:#04345a;
			background:transparent;
		}
		.header.shop .nav li.active a{
			color:#1d044b;
			background:#2bc700;
		}
		.header.shop .nav li a:hover{
			color:#fff;
			background:#2bc700;
		}

		.header.shop .nav .dropdown li{
			margin:0;
		}
		.header.shop .nav li .dropdown li:hover a{
			background:#2bc700;
		}

		.header.shop .nav li .dropdown li a {
			color: #333;
			padding: 8px 15px;
			font-weight: 400;
			background:#fff;
			border-radius: 20px	;
		}
		.header.shop.v2 .nav li .dropdown li a {
			color: #333;
			background:#fff;
		}
		.header.shop .nav li .dropdown li a {
			font-weight: 400;
			font-size: 14px;
		}
		.header.shop .nav li .dropdown li a:hover{
			color:#fff;
		}

		.header.shop .nav li .dropdown li .dropdown.sub-dropdown li a:hover{
			background:#04345a;
		}
		.header.shop .right-bar {
			display: inline-block;
			padding: 0;
			margin: 0;
			top: 5px;
			position: relative;
		}
		.header.shop .right-bar .sinlge-bar.top-search a {
			transform: translateY(3px);
		}
		.header.shop .right-bar .sinlge-bar.top-search a:hover {
			color:#04345a;
		}
		.header.shop .right-bar .sinlge-bar .single-icon{
			color:#333;
			font-size:20px;
			position:relative;
		}
		.header.shop .right-bar .sinlge-bar .single-icon:hover{
			color:#04345a;
		}
		.header.shop .right-bar .sinlge-bar .single-icon .total-count {
			position: absolute;
			top: -7px;
			background: #04345a;
			width: 18px;
			height: 18px;
			line-height: 18px;
			text-align: center;
			color: #fff;
			border-radius: 100%;
			font-size: 11px;
		}
		body[dir="rtl"] .total-count {
			left: -5px !important;
		}
		body[dir="ltr"] .total-count {
			right: -5px !important;
		}

				.wishlist-toggle {
					position: absolute;
					z-index: 200;
					top: 10px;
					font-size: 22px;
					color: transparent;          
					-webkit-text-stroke: 1px black; 
					cursor: pointer;
					transition: 0.2s;
				}

				.wishlist {
					z-index: 200;
					top: 10px;
					font-size: 22px;
					color: transparent;          
					-webkit-text-stroke: 1px black; 
					cursor: pointer;
					transition: 0.2s;
				}

				.wishlist-toggle.active {
					color: red;                  
					-webkit-text-stroke: 1px black; 
				}

				/* يمين أو يسار حسب لغة الموقع */
				body[dir="rtl"] .wishlist-toggle { left: 10px; }
				body[dir="ltr"] .wishlist-toggle { right: 10px; }

		.btn-heart {
			position: static; 
			align-items: center;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 14px;
			background: transparent;
			color: transparent;
			-webkit-text-stroke: 1px black;
			cursor: pointer;
			transition: 0.2s;
		}

		.header.shop .right-bar .sinlge-bar{
			display:inline-block;
			margin-right:25px;
		}
		.header.shop .right-bar .sinlge-bar:last-child{
			margin-right:20px;
		}
		.header.shop .right-bar .sinlge-bar li a:hover{
			color:#04345a;
		}
		.mobile-search{
			display:none;
		}
		/* Header Search */
		/* Search */
		.header .search-top{
			display:none;
		}
		.header .search-top a{
			font-size:17px;
		}
		.header .search-top a:hover{
			color:#04345a;
		}
		.header .search-form {
			position: absolute;
			left: -128px;
			z-index: 9999;
			opacity: 0;
			visibility: hidden;
			top: 46px;
			background: #ffffff75;
			padding: 7px;
			border-radius: 5px;
			transform: scaleY(0);
			box-shadow: 0px 4px 7px #0000003b;
			padding: 0;
			border-radius: 0;
		}
		.header .search-top.active .search-form {
			opacity:1;
			visibility:visible;
			transform: scaleY(1);
		}

		/* Header Sticky */
		.header .header-inner{
			width:100%;
			z-index:999;
		}
		.header.sticky .all-category h3{
			cursor:pointer;
			
		}

		/*======================================
		Hero Area CSS
		========================================*/ 
		.hero-slider {
			background: #fff;
			overflow: hidden;
		}
		.no-gutters{
			z-index: 100!important;
		}
		.hero-slider .single-slider {
			height: auto;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			height: auto;
		}
		.carousel-item  {
			height: 30% !important;
			
		}
		.hero-slider .hero-text {
			padding: 0 30px;
			margin-top:100px;
		}
		.hero-slider .hero-text h1 {
			line-height: 50px;
			font-size: 47px;
			font-weight: 700;
			color: #04345a;
			margin-bottom: 20px;
		}
		.hero-slider .hero-text h1 span {
			font-size: 20px;
			display: block;
			margin-bottom: 12px;
			color: #333;
			font-weight: 700;
			line-height: initial;
		}
		.hero-slider .hero-text p {
			color: #333;
			margin-bottom: 35px;
		}
		.hero-slider .hero-text .button{
			margin:0;
		}
		.hero-slider .hero-text .btn {
			color: #fff;
			background: #333;
			padding: 13px 30px;
			line-height: initial;
			border: none;
			height: auto;
			z-index: 0;
		}
		.hero-slider .hero-text .btn:hover{
			background:#04345a;
			color:#fff;
		}
		/* Start Hero Area 2 CSS */
		.hero-area2{
			position:relative;
		}
		.hero-area2 .single-slider.overlay:before{
			background:#04345a;
			opacity:0;
			visibility:hidden;
			transform:scale(0.9);
		}
		.hero-area2 .single-slider.overlay:hover:before{
			opacity:0.9;
			visibility:visible;
			transform:scale(1);
		}
		.hero-area2 .single-slider{
			height:500px;
			position:relative;
			background-size:cover;
			background-position:center;
			background-repeat:no-repeat;
		}
		.hero-area2 .single-slider .content{
			position:relative;
		}
		.hero-area2 .single-slider .content {
			width: 100%;
			padding: 15px;
			z-index: 2;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
			text-align: center;
			padding-top: 120px;
			opacity:0;
			visibility:hidden;
			transform:scale(1.1);
		}
		.hero-area2 .single-slider:hover .content{
			opacity:1;
			visibility:visible;
			transform:scale(1);
		}
		.hero-area2 .single-slider .content .sub-title{
			color:#fff;
			text-transform: uppercase;
			font-size:15px;
			font-weight:500;
		}
		.hero-area2 .single-slider .content .title {
			color: #fff;
			text-transform: uppercase;
			font-size: 24px;
			display: block;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.hero-area2 .single-slider .content .des{
			color:#fff;
		}
		.hero-area2 .single-slider .content .button .btn {
			padding: 9px 25px;
			border: 2px solid #fff;
			background: transparent;
			color: #fff;
			margin-top: 25px;
		}
		.hero-area2 .single-slider .content .button .btn:hover{
			background:#fff;
			color:#333;
			border-color:transparent;
		}
		/* Owl Nav CSS */
		.hero-area2 .owl-carousel .owl-nav {
			margin: 0;
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top:-30px;
		}
		.hero-area2 .owl-carousel .owl-nav div {
			height: 60px;
			width: 40px;
			line-height: 60px;
			text-align: center;
			background: #333;
			color: #fff;
			font-size: 14px;
			position: absolute;
			margin: 0;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			padding: 0;
			border-radius: 0;
		}
		.hero-area2 .owl-carousel .owl-nav div:hover{
			background:#04345a;
			color:#fff;
		}
		.hero-area2 .owl-carousel .owl-controls .owl-nav .owl-prev{
			left:0;
		}
		.hero-area2 .owl-carousel .owl-controls .owl-nav .owl-next{
			right:0;
		}
		/* Hero Area 3 */
		.hero-area3 .big-content{
			background-image: url('https://via.placeholder.com/850x530');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			height: 511px;
			margin-top:30px;
			position:relative;
		}
		.hero-area3 .big-content .inner {
			position: absolute;
			right: 0;
			top: 50%;
			padding: 0 50px 0 360px;
			transform: translateY(-50%);
		}
		.hero-area3 .big-content .title {
			font-size: 28px;
			margin-bottom: 20px;
			font-weight: 700;
			text-transform: capitalize;
			line-height: 37px;
		}
		.hero-area3 .big-content .title span{
			color:#04345a;
		}
		.hero-area3 .big-content .button{
			margin-top:40px;
			display:block;
		}
		.hero-area3 .big-content .button .btn{
			color:#fff;
		}

		.hero-area3 .small-content{
			height:240px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			margin-top:30px;
			position:relative;
		}
		.hero-area3 .small-content.first{
			background-image: url('https://via.placeholder.com/450x300');
		}
		.hero-area3 .small-content.secound{
			background-image: url('https://via.placeholder.com/450x300');
		}
		.hero-area3 .small-content .inner {
			padding: 30px;
			text-align:right;
			position:absolute;
			right:0;
			bottom:0;
		}
		.hero-area3 .small-content .title {
			font-size: 18px;
			margin-bottom: 20px;
			font-weight: 600;
			text-transform: capitalize;
		}
		.hero-area3 .small-content .title span{
			color:#04345a;
		}
		.hero-area3 .small-content .button{
			margin-top:10px;
			display:block;
		}
		.hero-area3 .small-content .button .btn {
			background: transparent;
			padding: 0;
			color: #333;
			border-bottom: 2px solid #333;
			font-size: 13px;
		}
		.hero-area3 .small-content .button .btn:hover{
			color:#04345a;
			border-color:#04345a;
		}
		/* Hero Area 4 */
		.hero-area4 .big-content{
			
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			height: 510px;
			margin-top:30px;
			position:relative;
		}
		.hero-area4 .big-content .inner {
			position: absolute;
			right: 0;
			top: 50%;
			padding: 0 80px 0 50px;
			transform: translateY(-50%);
		}
		.hero-area4 .big-content .title {
			font-size: 32px;
			margin-bottom: 20px;
			font-weight: 700;
			text-transform: capitalize;
			line-height: 35px;
		}
		.hero-area4 .big-content .title span{
			color:#04345a;
		}
		.hero-area4 .big-content .button{
			margin-top:40px;
			display:block;
		}
		.hero-area4 .big-content .button .btn{
			color:#fff;
		}
		.hero-area4 .owl-carousel .owl-nav {
			margin: 0;
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top:-20px;
		}
		.hero-area4 .owl-carousel .owl-nav div {
			height: 40px;
			width: 40px;
			line-height: 40px;
			text-align: center;
			background: #333;
			color: #fff;
			font-size: 14px;
			position: absolute;
			margin: 0;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			padding: 0;
			border-radius: 0;
		}
		.hero-area4 .owl-carousel .owl-nav div:hover{
			background:#04345a;
			color:#fff;
		}
		.hero-area4 .owl-carousel .owl-controls .owl-nav .owl-prev{
			left:0;
		}
		.hero-area4 .owl-carousel .owl-controls .owl-nav .owl-next{
			right:0;
		}

		/*======================================
		End Hero Area CSS
		========================================*/ 

		/*======================================
		Start Small Banner CSS
		========================================*/ 
		.small-banner{
			padding:30px 0;
			padding-bottom:0;
		}
		.small-banner .single-banner {
			overflow:hidden;
			position:relative;
		}
		.small-banner .single-banner img{
			height:100%;
			width:100%;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		.small-banner .single-banner .content {
			position: absolute;
			/* left: 0; */
			top: 50%;
			transform: translateY(-50%);
			padding-left: 35px;
		}
		.small-banner .single-banner h3 {
			font-size: 22px;
			font-weight: 700;
			text-transform: capitalize;
			color: #333;
		}
		.small-banner .single-banner h3 span{
			color:#04345a;
		}
		.small-banner .single-banner p {
			font-size: 14px;
			color: #04345a;
			font-weight: 500;
			margin-bottom: 5px;
			text-transform: capitalize;
		}
		.small-banner .single-banner a {
			color: #333;
			margin-top: 22px;
			display: block;
			font-size: 12px;
			font-weight:500;
			display: inline-block;
			text-transform:uppercase;
			border-bottom:2px solid #333;
		}
		.small-banner .single-banner a:hover{
			color:#04345a;
			border-color:#04345a;
		}
		/*======================================
		End Small Banner CSS
		========================================*/ 

		/*======================================
		Start Mid Banner CSS
		========================================*/ 
		.midium-banner{
			padding:0;
		}
		.midium-banner .single-banner{
			position:relative;
		}
		.midium-banner .single-banner img{
			height:100%;
			width:100%;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
			margin-bottom: 20px;
		}
		.midium-banner .single-banner .content {
			/* padding-left:50px; */
			position: absolute;
			top: 75%;
			/* transform:translateY(-50%); */
			text-align: center!important;
			font-weight: 500!important;
			margin-bottom: 5px!important;
		}
		.midium-banner .single-banner h3 {
			font-size: 27px;
			font-weight: 700;
			text-transform: uppercase;
			color: #ffffff;
			line-height: 30px;
		}
		.midium-banner .single-banner h3 span{
			color:#ffffff;
		}
		.midium-banner .single-banner p {
			font-size: 15px;
			color: #ffffff;
			/* font-weight: 800; */
			/* margin-bottom: 5px; */
			text-transform: uppercase;
		}
		.midium-banner .single-banner a {
			display: inline-block;
			text-align: center;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			padding: .375rem .75rem;
			font-size: 13px;
			border-radius: .25rem;
			/* padding: 10px 27px; */
			border-radius: 30px;
			/* margin-top: 25px; */
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-weight: bold;
			text-transform: uppercase;
			cursor: pointer;
			transition: all 0.3s ease;
			background: linear-gradient(45deg, #c9aeae, #00cc66, #0077ff);
			color: #fff;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
		}
		.midium-banner .single-banner a:hover{
			background: linear-gradient(45deg, #e6e6e6, #00994d, #0055cc);
			transform: scale(1.05);
		}
		/*======================================
		End Mid Banner CSS
		========================================*/ 

		/*======================================
		Start Most Popular CSS
		========================================*/
		.pro-tab-viewmore-wrap {
			position: relative;
			text-align: center;
		}
		.most-popular .section-title{
			margin-bottom:40px;
		}
		.pro-tab-viewmore-wrap .pro-viewmore {
		position: absolute;
		right: 40px;
		top: 0;
		}

		/* Slider Nav */
		.most-popular .owl-nav{
			margin: 0;
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top:-25px;
		}
		.most-popular .owl-carousel .owl-nav div {
			height: 60px;
			width: 30px;
			line-height: 58px;
			background: #fff;
			color: #333;
			position: absolute;
			margin: 0;
			border-radius: 0;
			font-size: 15px;
			text-align: center;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
			box-shadow: 0px 0px 10px #3333331c;
		}
		.most-popular .owl-carousel .owl-nav div:hover{
			color:#fff;
			background:#04345a;
		}
		.most-popular .owl-carousel .owl-controls .owl-nav .owl-prev{
			left:0;
		}
		.most-popular .owl-carousel .owl-controls .owl-nav .owl-next{
			right:0;
		}
		/*======================================
		End Most Popular CSS
		========================================*/

		/*======================================
		Start Single Product CSS
		========================================*/
		.product-area .nav-tabs {
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
			gap: 10px !important;
			width: 100% !important;
			border: none !important;
			/* background: linear-gradient(135deg, #e3f2fd, #c8e6c9, #e8f5e9) !important; */
			padding: 10px !important;
			border-radius: 10px !important;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
		}

		/* تعديل شكل الأزرار داخل التبويبات */
		.product-area .nav-tabs .nav-item .nav-link {
			font-size: 16px !important;
			font-weight: 600 !important;
			color: #004d40 !important;
			background: transparent !important;
			padding: 12px 20px !important;
			border-radius: 25px !important;
			transition: all 0.3s ease-in-out !important;
			border: 2px solid transparent !important;
		}

		/* تأثير التحويم - تكبير الزر بالكامل */
		.product-area .nav-tabs .nav-item .nav-link:hover {
			transform: scale(1.1) !important;
			background: linear-gradient(135deg, #b2ebf2, #a5d6a7, #dcedc8) !important;
			color: #003366 !important;
		}



		.product-area .nav-tabs li a.active,
		.product-area .nav-tabs li:hover a{
			background: linear-gradient(135deg, #003399, #00cc66) !important; /* لون أزرق غامق مع أخضر فاتح */
			color: #ffffff !important;
			font-weight: bold !important;
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
			border: 2px solid #04345a !important; /* حدود بلون أزرق غامق */
			transform: scale(1.05) !important;
		}
        /* Product Card */
        .product-card {
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }
        
        /* Product Box */
        .single-product {
            text-align: center;
        }
        
        /* Image Container */
        .single-product .product-img {
            position: relative;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }
        
        /* Product Image */
        .single-product .product-img img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        /* Wishlist Icon */
        .wishlist-toggle {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 22px;
            cursor: pointer;
            z-index: 10;
            color: #999;
        }
        .wishlist-toggle.active {
            color: red;
        }
        
        /* Hover Button Container */
        .button-head {
            position: absolute;
            left: 50%;
            bottom: -60px;
            transform: translateX(-50%);
            transition: all .3s ease;
            z-index: 5;
        }
        .single-product .button-head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 99;
}

        

        
        /* Button Style */
        .product-action-2 button,
        .product-action-2 a {
            padding: 8px 18px;
            font-size: 13px;
            border-radius: 6px;
            white-space: nowrap;
        }
        
        /* Product Content */
        .product-content {
            padding: 10px;
        }
        
        .product-title a {
            font-size: 15px;
            color: #111;
            text-decoration: none;
        }
        
        .product-price span {
            font-weight: bold;
            color: #04345a;
        }
        .product-price del {
            color: #aaa;
            margin-right: 5px;
        }

		.single-product .product-img .shop-list-quickview {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		/* left: 0; */
		right: 0;
		text-align: center;
		z-index: 99;
		margin-top: 20px;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .35s ease 0s;
		-o-transition: all .35s ease 0s;
		transition: all .35s ease 0s;
		}
		.single-product .product-img .shop-list-quickview a {
		color: #000;
		background-color: #fff;
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 100%;
		font-size: 18px;
		}
		.single-product .product-img .shop-list-quickview a:hover {
		background-color: #222;
		color: #fff;
		}
		.single-product .product-img .shop-list-quickview a i {
		line-height: 50px;
		}
		/* .single-product .product-content{
			margin-top:20px;
		} */
		.single-product .product-img:hover.default-overlay::before {
		background-color: rgba(38, 38, 38, 0.2);
		z-index: 9;
		-webkit-transition: all 250ms ease-out;
		-o-transition: all 250ms ease-out;
		transition: all 250ms ease-out;
		pointer-events: none;
		opacity: 1;
		}
		.single-product .product-img:hover.default-overlay.metro-overlay::before {
		background-color: rgba(38, 38, 38, 0.4);
		z-index: 9;
		-webkit-transition: all 250ms ease-out;
		-o-transition: all 250ms ease-out;
		transition: all 250ms ease-out;
		pointer-events: none;
		opacity: 1;
		}
		.single-product .product-img:hover img.hover-img {
		opacity: 1;
		}
		.single-product .product-content h3 {
			line-height: 10px;
		}
		.single-product .product-content h3 a {
			font-size: 14px;
			font-weight: 500;
			margin: 0;
		}
		.single-product .product-content h3 a:hover{
			color:#04345a;
		}
		.single-product .product-content .product-price {
		margin: 6px 0 0 0;
		}
		.single-product .product-content .product-price span {
			font-size: 15px;
			font-weight: 500;
		}
		.single-product .product-content .product-price span.old {
		text-decoration: line-through;
		opacity: .6;
		margin-right: 2px;
		}
		/*======================================
		End Single Product CSS
		========================================*/

		/*======================================
		Start Shop Sidebar CSS
		========================================*/
		.shop-sidebar .single-widget {
			margin-top: 30px;
			background: #F6F7FB;
			padding: 30px;
		}
		.shop-sidebar .single-widget:first-child {
			margin-top: 0;
		}
		.shop-sidebar .single-widget .title {
			position: relative;
			font-size: 18px;
			font-weight: 500;
			text-transform: capitalize;
			margin-bottom: 25px;
			display: block;
			border-bottom: 1px solid #ddd;
			padding-bottom: 15px;
		}
		/* Shop Price */
		.shop .range .price-filter {
			display: block;
			margin-top: 20px;
		}
		.shop .range #slider-range {
			box-shadow: none;
			border: none;
			height: 4px;
			background: #04345a;
			color: #04345a;
			border-radius: 0px;
		}
		.shop .range #slider-range .ui-slider-range {
			box-shadow: none;
			background: #222;
			border-radius: 0px;
			border: none;
		}
		.shop .range .ui-slider-handle.ui-state-default.ui-corner-all {
			width: 14px;
			height: 14px;
			line-height: 10px;
			background: #222;
			border: none;
			border-radius: 100%;
			top: -5px;
		}
		.shop .range .label-input {
			margin-top: 15px;
		}
		.shop .range .label-input span{
			margin-right:5px;
			color:#282828;
		}
		.shop .range .ui-slider-handle.ui-state-default.ui-corner-all {
			background: #04345a;
			color: #04345a;
			cursor:pointer;
		}
		.shop .range .label-input input {
			border: none;
			margin: 0;
			font-weight: 600;
			font-size: 14px;
			color: #222;
			background: transparent;
		}
		.shop .range .check-box-list {
			margin-top: 15px;
		}
		.shop .range .check-box-list li {
			margin-bottom: 5px;
		}
		.shop .range .check-box-list li:last-child{
			margin:0;
		}
		.shop .range .check-box-list li label input {
			display: inline-block;
			margin-right: 6px;
			position: relative;
			top: 1px;
		}
		.shop .range .check-box-list li label {
			margin: 0;
			font-size: 14px;
			font-weight: 400;
			color:#333;
			cursor:pointer;
		}
		.shop .range .check-box-list .count{
			margin-left:5px;
			color:#666;
		}
		/* Category List */
		.shop-sidebar .categor-list {
			margin-top: 10px;
		}

		.shop-sidebar .categor-list li {
			margin-bottom: 10px;
		}
		.shop-sidebar .categor-list li:last-child{
			margin-bottom:0px;
		}
		.shop-sidebar .categor-list li a {
			display: inline-block;
			color: #666;
			font-weight: 400;
			font-size: 14px;
			text-transform: capitalize;
		}
		.shop-sidebar .categor-list li a:hover{
			color:#04345a;
		}
		/* Recent Post */
		.shop-sidebar .single-post {
			position: relative;
			margin-top: 30px;
			padding-bottom: 30px;
			border-bottom: 1px solid #ddd;
		}
		.shop-sidebar .single-post.first{
			padding-top:0px;
		}
		.shop-sidebar .single-post:last-child{
			padding-bottom:0px;
			border:none;
		}
		.shop-sidebar .single-post .image img{
			height: 80px;
			width: 80px;
			position:absolute;
			left:0;
			top:0;
			border-radius:100%;
		}
		.shop-sidebar .single-post .content{
			padding-left:100px;
		}
		.shop-sidebar .single-post .content h5 {
			line-height: 18px;
		}
		.shop-sidebar .single-post .content h5 a {
			color: #222;
			font-weight: 500;
			font-size: 14px;
			font-weight: 500;
			display: block;
		}
		.shop-sidebar .single-post .content h5 a:hover{
			color:#04345a;
		}
		.shop-sidebar .single-post .content .price {
			display: block;
			color: #333;
			font-weight: 500;
			margin: 5px 0 0px 0;
			text-transform: uppercase;
			font-size: 14px;
		}
		.shop-sidebar .single-post .reviews li{
			display:inline-block;
		}
		.shop-sidebar .single-post .reviews li i{
			color:#999;
		}
		.shop-sidebar .single-post .reviews li.yellow i{
			color:#04345a;
		}
		/* Shop Topbar */
		.shop .shop-top {
			clear: both;
			background: #f6f7fb;
			padding: 18px 20px 50px 20px;
		}
		.shop .shop-shorter {
			float: left;
		}
		.shop .single-shorter {
			display: inline-block;
			margin-right: 10px;
		}
		.shop .single-shorter:last-child{
			margin:0;
		}
		.shop .single-shorter label {
			display: inline-block;
			margin: 4px 5px 0 0;
			font-weight:500;
		}
		.shop .nice-select {
			clear: initial;
			display: inline-block;
			margin: 0;
			border: 1px solid #e6e6e6;
			border-radius: 0px;
			height: auto;
			width: auto;
			border-radius: 0px;
		}
		.shop .nice-select::after{
			border-color:#888;
		}
		.shop .nice-select .list {
			border-radius:0px;
		}
		.shop .nice-select .option.selected {
			font-weight: 500;
		}
		.shop .nice-select .list li{
			color:#666;
			border-radius:0px;
		}
		.shop .nice-select .list li:hover{
			background:#04345a;
			color:#fff;
		}
		.shop .view-mode {
			float: right;
		}
		.shop .view-mode li {
			display: inline-block;
			margin-right: 5px;
		}
		.shop .view-mode li:last-child{
			margin:0;
		}
		.shop .view-mode li a {
			width: 43px;
			height: 32px;
			background: transparent;
			border: 1px solid #77777775;
			text-align: center;
			display: block;
			line-height: 32px;
			color: #888;
			border-radius: 0px;
		}
		.shop .view-mode li.active a,
		.shop .view-mode li:hover a {
			background: #04345a;
			color:#fff;
			border-color:transparent;
		}
		/*======================================
		End Shop Sidebar CSS
		========================================*/

		/*======================================
		Start Shop Single CSS
		========================================*/
		.shop.single{
			padding:70px 0 100px;
		}
		.shop.single .product-gallery {
			margin-top: 30px;
		}
		.shop.single .flexslider-thumbnails {
			position: relative;
		}
		.shop.single .product-gallery .slides li{
			position:relative;
		}
		.shop.single .product-gallery .slides li img{
			width:100%;
		}
		.shop.single .flex-control-nav{
			margin-top:15px;
		}
		.shop.single .flex-control-thumbs li {
			width: 20%;
			position: relative;
			margin: 0 8px 10px -3px;
		}
		.shop.single .flex-control-thumbs li img {
			border: none;
			padding: 0;
			border:1px solid transparent;
		}
		.shop.single .flex-control-thumbs li img.flex-active{
			border-color:#04345a;
		}
		.shop.single .flex-direction-nav{
			display:none;
		}
		.shop.single .product-des{
			margin-top:30px;
		}
		.shop.single .product-des .short h4 {
			font-size: 22px;
			font-weight: 600;
			margin-top: -5px;
			line-height: 28px;
		}
		.shop.single .product-des .short .description {
			font-size: 14px;
			color: #555555;
			margin-top: 20px;
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px solid #eee;
		}
		.shop.single .product-des .total-review{
			font-size:14px;
			font-weight:500;
			margin-left:10px;
			display:inline-block;
		}
		.shop.single .product-des .total-review:hover{
			color:#04345a;
		}
		.shop.single .product-des  .rating{
			margin-top:20px;
			display:inline-block;
		}
		.shop.single .product-des .rating li{
			display:inline-block;
		}
		.shop.single .product-des .rating li i{
			color:#04345a;
		}
		.shop.single .product-des .rating li.dark i{
			color:#555;
		}
		.shop.single .product-des .price {
			font-size: 20px;
			color: #333;
			font-weight: 600;
			margin-top: 15px;
		}
		.shop.single .product-des .price s{
			color:#333;
		}
		.shop.single .product-des .price span{
			display:inline-block;
			margin-right:15px;
			color:#04345a;
		}
		.shop.single .product-des .product-buy {
			margin-top: 40px;
		}
		.shop.single .product-des .color {
			display: inline-block;
			margin-right: 50px;
		}
		.shop.single .product-des .color h4 {
			font-size: 18px;
			font-weight: 600;
		}
		.shop.single .product-des .color h4 span {
			display: block;
			font-size: 14px;
			font-weight: 500;
			margin-top: 4px;
		}
		.shop.single .product-des .color ul{
			margin-top: 10px;
		}
		.shop.single .product-des .color ul li{
			display:inline-block;
			margin-right:5px;
		}
		.shop.single .product-des .color ul li:last-child{
			margin-right:0;
		}
		.shop.single .product-des .color ul li a{
			height:30px;
			width:30px;
			line-height:30px;
			text-align:center;
			display:block;
			background:#333;
		}
		.shop.single .product-des .color ul li a i{
			font-size:11px;
			color:#fff;
			opacity:0;
			visibility:hidden;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		.shop.single .product-des .color ul li a:hover i{
			opacity:1;
			visibility:visible;
		}
		.shop.single .product-des .color ul li .one{
			background:#3498db;
		}
		.shop.single .product-des .color ul li .two{
			background:#04345a;
		}
		.shop.single .product-des .color ul li .three{
			background:#8e44ad;
		}
		.shop.single .product-des .color ul li .four{
			background:#2ecc71;
		}
		/* Size */
		.shop.single .product-des .size{
			display:inline-block;
		}
		.shop.single .product-des .size h4{
			display: block;
			font-size: 14px;
			font-weight: 500;
			margin-top: 0px;
		}
		.shop.single .product-des .size ul{
			display:inline-block;
			margin-top: 10px;
		}
		.shop.single .product-des .size ul li {
			display: inline-block;
			margin-right: 5px;
		}
		.shop.single .product-des .size ul li:last-child{
			margin-right:0;
		}
		.shop.single .product-des .size ul li a {
			display: block;
			height: 30px;
			width: 36px;
			border: 1px solid #eee;
			text-align: center;
			line-height: 30px;
			font-size: 14px;
		}
		.shop.single .product-des .size ul li a:hover{
			color:#04345a;
		}
		.shop.single .quantity {
			display: inline-block;
			margin-right: 10px;
		}
		.shop.single .quantity h6 {
			display: inline-block;
			margin-right: 10px;
			font-size: 15px;
			font-weight: 500;
		}
		.shop.single .quantity .input-group {
			width: 151px;
			display: inline-block;
		}
		.shop.single .quantity .button {
			display: inline-block;
			position: absolute;
			top: 0;
			display:inline-block;
		}
		.shop.single .quantity .button.minus{
			left:0;
			border-radius:0;
			overflow:hidden;
		}
		.shop.single .quantity .button.plus {
			right: 0;
			border-radius:0;
			overflow:hidden;
		}
		.shop.single .quantity .button .btn {
			padding: 0;
			width: 35px;
			height: 45px;
			line-height: 45px;
			border-radius: 0px;
			background: transparent;
			color: #282828;
			font-size: 12px;
			border: none;
		}
		.shop.single .quantity .button .btn:hover{
			color:#04345a;
		}
		.shop.single .quantity .input-number {
			border: 1px solid #eceded;
			width: 100%;
			text-align: center;
			height: 45px;
			border-radius: 0px;
			overflow: hidden;
			padding: 0px 38px;
		}
		.shop.single .add-to-cart {
			display:inline-block;
		}
		.shop.single .add-to-cart .btn {
			height: 45px;
			width: auto;
			padding: 0 42px;
			line-height: 45px;
			text-align: center;
			text-transform: capitalize;
			margin-right: 5px;
			border-radius: 0px;
			background: #333;
			color: #fff;
			display: inline-block;
			font-weight: 500;
		}
		.shop.single .add-to-cart .btn:hover{
			color:#fff;
			background:#04345a;
		}
		.shop.single .add-to-cart .btn.min {
			padding: 0 20px;
			font-size: 17px;
			position: relative;
			top: 1px;
			line-height: 45px;
		}
		.shop.single .cat{
			font-size: 14px;
			font-weight: 500;
			color:#333;
			margin-top:30px;
		}
		.shop.single .cat a{
			display:inline-block;
			margin-left:10px;
		}
		.shop.single .cat a:hover{
			color:#04345a;
		}
		.shop.single .availability{
			color:#333;
			font-size:14px;
			margin-top:6px;
		}
		/* Product Tab */
		.shop.single .product-info {
			margin-top: 50px;
		}
		.shop.single .nav-tabs {
			border:none;
		}
		.shop.single .nav-tabs li {
			margin-right: 10px;
		}
		.shop.single .nav-tabs li:last-child{
			margin-right:0;
		}
		.shop.single .nav-tabs li a {
			border: 0px solid;
			border-radius: 0px;
			background: #fff;
			color: #333;
			padding: 10px 30px;
			font-weight: 500;
			font-size: 14px;
			border: 1px solid #eee;
		}
		.shop.single .nav-tabs li a i{
			margin-right:10px;
		}
		.shop.single .nav-tabs li a.active,
		.shop.single .nav-tabs li:hover a{
			background:#04345a;
			color:#fff;
			border-color:transparent;
		}

		.shop.single .single-des {
			margin-top:35px;
		}
		.shop.single .single-des h4{
			margin-bottom:15px;
			font-weight:500;
			font-size:22px;
			
		}
		.shop.single .single-des ul li {
			color: #555;
			display: block;
			margin-bottom: 10px;
			position:relative;
			padding-left:20px;
		}
		.shop.single .single-des ul li::before {
			position: absolute;
			content: "";
			/* left: 0; */
			top: 9px;
			height: 7px;
			width: 7px;
			background: #04345a;
			border-radius: 50%;
		}

		.shop.single .item-info {
			width: 100%;
		}
		.shop.single .item-info tbody td {
			border: 1px solid #e6e6e6;
			padding: 10px;
		}
		.shop.single .avg-ratting {
			margin-bottom: 20px;
		}
		.shop.single .avg-ratting h4 {
			font-size: 18px;
			margin: 0;
		}
		.shop.single .avg-ratting h4 span{
			font-size:14px;
		}
		.shop.single .single-rating {
			margin-bottom: 20px;
		}
		.shop.single .single-rating:last-child{
			margin:0;
			border:none;
			padding:0;
		}
		.shop.single .rating-author {
			float: left;
			margin-right: 10px;
			padding: 20px;
			padding-right: 10px;
		}
		.shop.single .rating-author img {
			width: 60px;
			border-radius: 100%;
			height: 60px;
		}
		.shop.single .rating-des {
			padding-left: 72px;
			background: #f9f8f8;
			padding: 17px 20px 17px 107px;
		}
		.shop.single .rating-des .ratings {
			margin: 0;
		}
		.shop.single .rating-des h6 {
			font-size: 14px;
			font-weight: 600;
			line-height: 18px;
		}
		.shop.single .ratting-main .single-rating ul li{
			display:inline-block;
		}
		.shop.single .ratting-main .single-rating ul li i{
			color:#04345a;
			font-size:14px;
		}
		.shop.single .review-inner label {
			display: inline-block;
			margin: 0 5px 0 0;
		}
		.shop.single .review-inner .ratings {
			overflow: visible;
			display: inline-block;
			margin: 0;
		}
		.shop.single .review-inner .ratings ul{
			display:inline-block;
		}
		.shop.single .ratting-main .single-rating ul {
			display: inline-block;
			margin-right: 5px;
		}
		.shop.single .ratings .rate-count {
			display: inline-block;
			color: #666;
			font-size: 13px;
		}
		.shop.single .comment-review {
			margin-bottom: 30px;
		}
		.shop.single .comment-review .add-review{
			margin-top:30px;
		}
		.shop.single .comment-review .add-review h5{
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 7px;
		}
		.shop.single .comment-review .add-review p{
			color:#333;
		}
		.shop.single .comment-review h4 {
			font-size: 15px;
			font-weight: 600;
			margin-bottom: 7px;
			margin-top:20px;
		}
		.shop.single .comment-review .review-inner{
			margin-bottom:15px;
			display:block;
		}
		.shop.single .comment-review .rating li {
			display:inline-block;
		}
		.shop.single .comment-review .rating li i{
			color:#04345a;
			font-size: 14px;
		}
		.shop.single .rating-des p{
			margin-top:5px;
		}
		.shop.single .avg-ratting h4 {
			font-size: 20px;
			color: #333;
		}
		.shop.single .form .form-group input {
			width: 100%;
			height: 45px;
				/* padding: 10px 20px; */
			background: #fff;
			border: 1px solid #ddd;
			resize: none;
			border-radius: 0;
			color: #333;
		}
		.shop.single .form .form-group button {
			border: none;
			padding: 17px 50px;
		}
		.shop.single .form .form-group textarea {
			width: 100%;
			height:200px;
			padding: 20px;
			background:#fff;
			border:1px solid #ddd;
			resize:none;
			border-radius:0;
			color:#333;
		}
		.shop.single .form .form-group label {
			color: #333;
			position: relative;
		}
		.shop.single .form .form-group label span {
			color: #ff2c18;
			display: inline-block;
			position: absolute;
			right: -12px;
			top: 4px;
			font-size: 16px;
		}
		.shop.single .review-panel{
			margin-top:35px;
		}
		/*======================================
		End Shop Single CSS
		========================================*/

		/*======================================
		Start Shop Home List CSS
		========================================*/
		.shop-home-list{
			padding:0;
			padding-bottom:100px;
		}
		.shop-home-list .shop-section-title{
			margin-bottom:20px;
		}
		.shop-home-list .shop-section-title h1 {
			font-size: 22px;
			margin-bottom: 0;
			text-transform: capitalize;
			position: relative;
			color: #2c3f37;
			font-weight: 700;
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
		.shop-home-list .shop-section-title h1::before {
			position: absolute;
			content: "";
			height: 2px;
			width: 50px;
			background: #04345a;
			/* left: 0; */
			bottom: -1px;
		}
		.shop-home-list .single-list {
			overflow: hidden;
			position: relative;
			margin-top: 30px;
			border: 1px solid #dfdbdb;
			padding: 10px;
		}
		.shop-home-list .single-list .list-image{
			position:relative;
			height:150px !important;
			width:100px !important;
		}
		
		.shop-home-list .single-list .list-image img{
			position:relative;
			width: 100%;
			hieght: 100%;
			aspect-ratio: 9 / 16;
			overflow: hidden;
			object-fit: contain !important;

		}
		
		.shop-home-list .single-list .list-image.overlay:before{
			background:#000;
			opacity:0;
			visibility:hidden;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		.shop-home-list .single-list .list-image.overlay:hover:before{
			opacity:0.3;
			visibility:visible;
		}
		.shop-home-list .single-list .list-image .buy{
			height:40px;
			width:40px;
			aspect-ratio: 1 / 1;
			line-height:40px;
			font-size:14px;
			color:#fff;
			background:#04345a;
			border-radius:100%;
			display:block;
			position:absolute;
			left:50%;
			top:50%;
			margin-left:-20px;
			margin-top:-20px;
			text-align:center;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
			transform:scale(0);
			opacity:0;
			visibility:hidden;
		}
		.shop-home-list .single-list .list-image .buy:hover{
			/*background:#fff;*/
			color:#333;
		}
		.shop-home-list .single-list .list-image:hover .buy{
			opacity:1;
			visibility:visible;
			transform:scale(1);
		}
		.shop-home-list .single-list .no-padding{
			padding-right:0px;
		}
		.shop-home-list .single-list img{
			width:100%;
			height:100%;
		}
		.shop-home-list .single-list .content {
			padding-top: 45px;
			padding-right: 12px;
		}
		.shop-home-list .single-list .content .title {
			line-height: 18px;
		}
		.shop-home-list .single-list .content .title a{
			font-size: 14px;
			font-weight: 600;
		}
		.shop-home-list .single-list .content .titlea {
			color: #333;
		}
		.shop-home-list .single-list .content a:hover{
			color: #04345a;
		}
		.shop-home-list .single-list .content .price {
			margin-top: 15px;
			font-weight: 500;
			background: #04345a;
			display: inline-block;
			color: #fff;
			padding: 2px 18px;
			border-radius: 30px;
			font-size: 14px;
			font-weight: 500;
		}
		/*======================================
		End Shop Home List CSS
		========================================*/

		/*======================================
		Start Shopping Cart CSS
		========================================*/
		.table.shopping-summery {
			background: #fff;
		}
		.shopping-cart {
			background: #f6f6f6;
			padding: 50px 0;
		}
		.shopping-summery thead .main-hading{
			padding:0px 50px;
		}
		.shopping-summery thead {
			background: #04345a;
			color: #fff;
		}
		.shopping-summery thead tr th {
			border: solid 1px #04345a;
			padding: 10px;
			font-weight: 600;
			color: #fff;
			/* text-align: center; */
		}
		.shopping-summery tbody tr {
			border-bottom: 1px solid #04345a;
			margin-top: 20px;
		}
		.shopping-summery tbody tr img {
			border-radius: 0;
			width: 80px;
			height: 80px;
		}
		.shopping-summery tbody tr:last-child{
			border:none;
		}
		.shopping-summery tbody .product-name a {
			font-weight: 600;
			color: #282828;
			font-weight: 600;
			font-size: 17px;
		}
		.shopping-cart .table p {
			font-size: 14px;
			color: #666;
		}
		.shopping-summery tbody .product-name a:hover{
			color:#04345a;
		}
		.shopping-summery tbody .product img {
			max-width: 70px;
			border-radius: 100%;
			max-height: 65px;
			border: 1px solid #e6e6e6;
			padding: 4px;
		}
		.shopping-summery tbody .product:hover img{
			border-color:#04345a;
			-webkit-transform:rotate(360deg);
			-moz-transform:rotate(360deg);
			transform:rotate(360deg);
		}

		.shopping-cart .table .remove-icon{
			font-size:16px;
		}
		.shopping-cart .table td {
			vertical-align: middle;
			border-top: 1px solid #eee;
			padding: 30px;
		}
		.shopping-summery tbody .price {
			text-align: center;
		}
		.shopping-cart tbody .qty .input-group {
			width: 175px;
			display: inline-block;
		}
		.shopping-cart .qty .button {
			display: inline-block;
			position: absolute;
			top: 0;
		}
		.shopping-cart .qty .button.minus{
			left:0;
			border-radius:0;
			overflow:hidden;
		}
		.shopping-cart .qty .button.plus {
			right: 0;
			border-radius:0;
			overflow:hidden;
		}
		.shopping-cart .qty .button .btn {
			padding: 0;
			width: 44px;
			height: 47px;
			line-height: 50px;
			border-radius: 0px;
			background: transparent;
			color: #282828;
			border: none;
			font-size: 12px;
		}
		.shopping-cart .qty .button .btn:hover{
			color:#04345a;
		}
		.shopping-cart .qty .input-number {
			border: 1px solid #eceded;
			width: 100%;
			text-align: center;
			height: 47px;
			border-radius:0;
			overflow: hidden;
			padding: 0px 45px;
		}
		.shopping-summery tbody .total-amount {
			text-align: center;
		}
		.shopping-summery tbody .action {
			text-align: center;
		}
		.shopping-summery tbody .action a:hover{
			color:#04345a;
		}
		.shopping-cart .total-amount{
			margin-top:50px;
		}
		.shopping-cart .total-amount .left .coupon form input {
			width: 220px;
			display: inline-block;
			height: 48px;
			color: #333;
			padding: 0px 20px;
			border: none;
			box-shadow: 0px 0px 5px #0000000a;
		}
		.shopping-cart .total-amount .left .coupon form .btn {
			display: inline-block;
			height: 48px;
			border: navajowhite;
			margin-left: 4px;
			background: transparent;
			color: #333;
			background: #fff;
			box-shadow: 0px 0px 5px #00000012;
		}
		.shopping-cart .total-amount .left .coupon form .btn:hover{
			background:#fff;
			color:#04345a;
		}
		.shopping-cart .total-amount .left label{
			font-size:22px;
			font-weight:500;
			color:#333;
		}
		.shopping-cart .total-amount .left .checkbox {
			text-align: left;
			margin: 0;
			margin-top: 20px;
		}
		.shopping-cart .total-amount .left .checkbox label {
			font-size: 15px;
			font-weight: 400;
			color: #333;
			position: relative;
			padding-left: 30px;
		}
		.shopping-cart .total-amount .left .checkbox label:hover{
			cursor:pointer;
		}
		.shopping-cart .total-amount .left .checkbox label input{
			display:none;
		}
		.shopping-cart .total-amount .left .checkbox label::before {
			position: absolute;
			content: "";
			/* left: 0; */
			top: 4px;
			width: 16px;
			height: 16px;
			border: 1px solid #555555;
			border-radius: 0px;
		}
		.shopping-cart .total-amount .left .checkbox label::after {
			position: absolute;
			content: "\f00c";
			font-family: "Fontawesome";
			/* left: 0; */
			top: 0;
			width: 22px;
			height: 22px;
			line-height: 24px;
			left: 3px;
			top: 0px;
			opacity: 0;
			visibility: hidden;
			transform: scale(0);
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			display: block;
			font-size: 11px;
		}
		.shopping-cart .total-amount .left .checkbox label.checked::after{
			opacity:1;
			visibility:visible;
			transform:scale(1);
		}
		.shopping-cart .total-amount .right {
			padding-left: 100px;
		}

		.shopping-cart .total-amount .right ul li {
			font-size: 15px;
			font-weight: 400;
			color: #333;
			margin-bottom: 12px;
		}
		.shopping-cart .total-amount .right ul li.last {
			padding-top: 12px;
			border-top: 1px solid #c8c8c8;
			color: #333;
			font-size: 15px;
			font-weight: 400;
		}
		.shopping-cart .total-amount .right ul li span{
			display:inline-block;
		}
		.shopping-cart .total-amount .right .button5 .btn {
			text-align: center;
			border-radius: 0;
			width: 100%;
			margin-top: 10px;
			height: 46px;
			line-height: 18px;
			font-size: 13px;
			color: #fff;
		}
		/*======================================
		End Shopping Cart CSS
		========================================*/

		/*======================================
		Start Checkout Form CSS
		========================================*/
		.shop.checkout {
			padding: 0;
			background: #fff;
			padding-top: 20px;
			padding-bottom: 50px;
		}
		.shop.checkout .checkout-form {
			margin-top: 30px;
		}
		.shop.checkout .checkout-form h2 {
			font-size: 25px;
			color: #333;
			font-weight: 700;
			line-height: 27px;
		}
		.shop.checkout .checkout-form p {
			font-size: 16px;
			color: #333;
			font-weight: 400;
			margin-top: 12px;
			margin-bottom: 30px;
		}
		.shop.checkout .form .form-group {
			margin-bottom: 25px;
		}
		.shop.checkout .form .form-group label{
			color:#333;
			position:relative;
		}
		.shop.checkout .form .form-group label span {
			color: #ff2c18;
			display: inline-block;
			position: absolute;
			right: -12px;
			top: 4px;
			font-size: 16px;
		}
		.shop.checkout .form .form-group input {
			width: 100%;
			height: 45px;
			line-height: 50px;
			padding: 0 20px;
			border-radius: 3px;
			border-radius: 0px;
			color: #333 !important;
			border: none;
			background: #F6F7FB;
		}

		.shop.checkout .nice-select {
			width: 100%;
			height: 45px;
			line-height: 50px;
			margin-bottom: 25px;
			background: #F6F7FB;
			border-radius: 0px;
			border:none;
		}
		.shop.checkout .nice-select .list {
			width: 100%;
			height: 300px;
			overflow: scroll;
		}
		.shop.checkout .nice-select .list li.option{
			color:#333;
		}
		.shop.checkout .nice-select .list li.option:hover{
			background:#F6F7FB;
			color:#333;
		}
		.shop.checkout .form .address input {
			margin-bottom: 15px;
		}
		.shop.checkout .form .address input:last-child{
			margin:0;
		}
		.shop.checkout .form .create-account {
			margin: 0;
		}
		.shop.checkout .form .create-account input {
			width: auto;
			display: inline-block;
			height: auto;
			border-radius: 100%;
			margin-right: 3px;
		}
		.shop.checkout .form .create-account label {
			display: inline-block;
			margin: 0;
		}
		.shop.checkout .order-details {
			margin-top: 30px;
			background: #fff;
			padding: 15px 0 30px 0;
			border: 1px solid #eee;
		}
		.shop.checkout .single-widget {
			margin-bottom: 30px;
		}
		.shop.checkout .single-widget:last-child{
			margin:0;
		}
		.shop.checkout .single-widget h2 {
			position:relative;
			font-size: 15px;
			font-weight: 600;
			padding: 10px 30px;
			line-height: 24px;
			text-transform: uppercase;
			color: #333;
			padding-bottom: 5px;
		}
		.details {
			display: none; /* إخفاء التفاصيل بشكل افتراضي */
			margin-top: 10px;
			background-color: #f4f4f4;
			padding: 10px;
			border: 1px solid #ccc;
		}
		.shop.checkout .single-widget .checkbox {
			text-align: left;
			margin: 0;
			padding: 0px 30px;
			margin-top:30px;
		}
		.shop.checkout .single-widget .checkbox label {
			color: #555555;
			position: relative;
			font-size: 14px;
			padding-left: 20px;
			margin-top: 5px;
			font-weight: 400;
			display: block;
			margin-bottom: 15px;
		}
		.shop.checkout .single-widget .checkbox label:last-child{
			margin-bottom:0;
		}
		.shop.checkout .single-widget .checkbox label:hover{
			cursor:pointer;
		}

		.shop.checkout .single-widget .checkbox label::before {
			/* position: absolute; */
			/* content: ""; */
			/* left: 0; */
			top: 7px;
			width: 12px;
			height: 12px;
			line-height: 16px;
			border: 1px solid #666;
			border-radius: 100%;
		}
		.shop.checkout .single-widget .checkbox label::after {
			position: absolute;
			content: "";
			/* left: 0; */
			top: 7px;
			width: 12px;
			height: 12px;
			line-height: 16px;
			border-radius: 100%;
			display:block;
			background:#666;
			transform:scale(0);
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		/* .shop.checkout .single-widget .checkbox label.checked::after{
			opacity:1;
			visibility:visible;
			transform:scale(1);
		} */
		.shop.checkout .single-widget.payement {
			padding: 0px 38px;
			text-align: center;
			margin-top: 30px;
		}
		.shop.checkout .single-widget.get-button {
			text-align: center;
			/* padding:0px 35px; */
		}
		.shop.checkout .single-widget.get-button .btn {
			height: 46px;
			width: 100%;
			line-height: 19px;
			text-align: center;
			border-radius: 0;
			text-transform: uppercase;
			color: #fff;
		}
		/*======================================
		End Checkout Form CSS
		========================================*/

		/*======================================
		Login & Register CSS
		========================================*/
		.shop.login {
			padding: 100px 0;
		}
		.shop.login .login-form h2 {
			position:relative;
			font-size: 35px;
			color: #333;
			font-weight: 400;
			line-height: 27px;
			text-transform: uppercase;
			margin-bottom: 12px;
			padding-bottom: 20px;
			text-align: center;
		}
		.shop.login .login-form h2:before{
			position:absolute;
			content:"";
			left:50%;
			bottom:0;
			height:2px;
			width:50px;
			background:#04345a;
			margin-left:-25px;
		}
		.shop.login .login-form p {
			font-size: 14px;
			color: #333;
			font-weight: 400;
			text-align: center;
			margin-bottom:50px;
		}
		.shop.login .form {
			margin-top: 30px;
		}
		.shop.login .form .form-group {
			margin-bottom: 22px;
		}
		.shop.login .form .form-group input {
			width: 100%;
			height: 45px;
			line-height: 50px;
			padding: 0 20px;
			border-radius: 3px;
			border-radius: 0px;
			color:#333 !important;
			border: none;
			background:#F6F7FB;
		}
		.shop.login .form .form-group label {
			color: #333;
			position: relative;
		}
		.shop.login .form .form-group label span {
			color: #ff2c18;
			display: inline-block;
			position: absolute;
			right: -12px;
			top: 4px;
			font-size: 16px;
		}
		.shop.login .form .form-group input:hover{
			border-color:#1308a3;
			color:#1308a3;
		}
		.shop.login .form .form-group.login-btn {
			margin: 0;
		}
		.shop.login .form button {
			border: none;
		}
		.shop.login .form .btn {
			display: inline-block;
			margin-right: 10px;
			height: 46px;
			color: #fff;
			line-height: 20px;
		}
		.shop.login .form .btn:hover{
			background:#04345a;
			color:#fff;
		}
		.shop.login .login-form .checkbox {
			text-align: left;
			margin: 0;
			margin-top: 20px;
			display:inline-block;
		}
		.shop.login .login-form .checkbox label {
			font-size: 14px;
			font-weight: 400;
			color: #333;
			position: relative;
			padding-left: 20px;
		}
		.shop.login .login-form .checkbox label:hover{
			cursor:pointer;
		}
		.shop.login .login-form .checkbox label input{
			display:none;
		}
		.shop.login .login-form .checkbox label::before {
			position: absolute;
			content: "";
			/* left: 0; */
			top: 6px;
			width: 12px;
			height: 12px;
			border: 1px solid #555555;
			border-radius: 0px;
		}
		.shop.login .login-form .checkbox label::after {
			position: absolute;
			content: "\f00c";
			font-family: "Fontawesome";
			width: 12px;
			height: 12px;
			line-height: 23px;
			left: 2px;
			top: 0px;
			opacity: 0;
			visibility: hidden;
			transform: scale(0);
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			display: block;
			font-size: 9px;
		}
		.shop.login .login-form .checkbox label.checked::after{
			opacity:1;
			visibility:visible;
			transform:scale(1);
		}
		.shop.login .login-form .lost-pass{
			display:inline-block;
			margin-left:25px;
			color:#333;
			font-size:14px;
			font-weight:400;
		}
		.shop.login .login-form .lost-pass:hover{
			color:#04345a;
		}
		/*======================================
			End Login CSS
		========================================*/

		/*======================================
		Start Shop List CSS
		========================================*/
		.shop-list .list-content{
			margin-top:50px;
		}
		.shop-list .list-content .product-price span {
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 3px;
			display: block;
		}
		.shop-list .list-content .title {
			line-height: 20px;
		}
		.shop-list .list-content .title a:hover{
			color:#04345a;
		}
		.shop-list .list-content .title a {
			font-size: 18px;
			font-weight: 600;
		}
		.shop-list .list-content .rating {
			margin: 5px 0 8px 0;
		}
		.shop-list .list-content .rating li{
			display:inline-block;
		}
		.shop-list .list-content .rating li i{
			color: #04345a;
		}
		.shop-list .list-content .rating li.total {
			color: #333;
			font-size: 12px;
			margin-left: 3px;
		}
		.shop-list .list-content .btn {
			margin-top: 22px;
			height: 42px;
			line-height: 15px;
			color: #333;
			background: transparent;
			border: 1px solid #cecece;
			font-size: 13px;
			border-radius: 30px;
			height: auto;
			line-height: a;
			padding: 13px 32px;
		}
		.shop-list .list-content .btn:hover{
			background:#04345a;
			color:#fff;
			border-color:transparent;
		}
		/* Pagination CSS */
		.pagination {
			text-align: left;
			margin: 50px 0 0 0;
			display:block;
		}
		.pagination.center {
			text-align: center;
		}
		.pagination .pagination-list li {
			margin-right: 5px;
			display: inline-block;
		}
		.pagination .pagination-list li:last-child{
			margin-right:0px;
		}
		.pagination .pagination-list li a {
			background: #F6F7FB;
			color: #666;
			padding: 6px 18px;
			font-weight: 400;
			border: 1px solid #e1e1e1;
			font-size: 16px;
			border-radius: 0px;
		}
		.pagination .pagination-list li.active a,
		.pagination .pagination-list li:hover a{
			background: #04345a;
			color: #fff;
			border-color: transparent;
		}
		.pagination .pagination-list li a i{
			font-size:13px;
		}
		.blog-grids.pagination{
			margin-top:50px;
			text-align:center;
		}
		/*======================================
		End Shop List CSS
		========================================*/

		/*=============================
			Start Cowndown CSS
		===============================*/
		.cown-down {
			position: relative;
			height: 515px;
			overflow:hidden;
		}
		.cown-down .padding-right{
			padding-right:0;
		}
		.cown-down .padding-left{
			padding-left:0;
		}
		.cown-down .image img {
			width:100%;
			height:100%;
		}
		.cown-down .content {
			text-align: center;
			background: #FDFBEF;
			height: 100%;
			position:relative;
		}
		.cown-down .content .heading-block{
			position:absolute;
			left:0;
			top:50%;
			transform:translateY(-50%);
			padding: 75px;
		}
		.cown-down .content .small-title {
			font-size: 13px;
			color: #777;
			display: block;
			text-transform: uppercase;
			margin-bottom: 5px;
			font-weight: 600;
		}
		.cown-down .content .title {
			font-size: 25px;
			font-weight: 600;
			margin-bottom: 20px;
			text-transform: capitalize;
		}
		.cown-down .content .price {
			margin-top: 35px;
			font-size: 35px;
			font-weight: 700;
			color: #04345a;
		}
		.cown-down .content .price s{
			margin-top: 35px;
			font-size: 24px;
			font-weight: 500;
			color:#666;
		}
		.cown-down .content .cdown {
			float: none;
			text-align:center;
			margin-top:40px;
			width: 80px;
			display:inline-block;
			
		}
		.cown-down .content .cdown {
			text-align: center;
		}
		.cown-down .content .cdown{
			display:inline-block;
		}
		.cown-down .content .cdown span {
			color: #333;
			font-size: 22px;
			font-weight:400;
			text-transform:uppercase;
		}
		.cown-down .content .cdown p{
			font-size:13px;
			color:#666;
			text-transform:uppercase;
		}
		/*=============================
			End Cowndown CSS
		===============================*/

		/*======================================
		Start Shop Services CSS
		========================================*/
		/* العنصر الرئيسي */
		.shop-services .single-service {
			position: relative;
			padding-inline-start: 65px; /* بديل padding-left */
		}

		/* الأيقونة */
		.shop-services .single-service i {
			height: 50px;
			width: 50px;
			line-height: 50px;
			text-align: center;
			color: #333;
			background: transparent;
			border-radius: 100%;
			display: block;
			font-size: 32px;
			position: absolute;
			inset-inline-start: 0; /* بديل left: 0 */
			top: 0;
		}

		/*======================================
		End Shop Services CSS
		========================================*/

		/*======================================
		Start Shop Newsletter CSS
		========================================*/
		.shop-newsletter{
			background:#fff;
		}
		.shop-newsletter .inner{
			text-align:center;
		}
		.shop-newsletter .inner h4 {
			color: #333;
			font-size: 17px;
			font-weight: 600;
			margin-bottom: 5px;
			text-transform: uppercase;
		}
		.shop-newsletter .inner p{
			color:#777;
			font-size:14px;
			font-weight:400;
			margin-bottom:30px;
		}
		.shop-newsletter .inner p span{
			color:#04345a;
		}
		.shop-newsletter .newsletter-inner{
			position:relative;
			display: inline-block;
		}
		.shop-newsletter .newsletter-inner input {
			width: 480px;
			height: 55px;
			border-radius: 0px;
			padding: 0px 30px;
			font-weight: 400;
			display: inline-block;
			text-shadow: none;
			box-shadow: none;
			border-radius: 0;
			border: none;
			border: 1px solid #ececec;
			border-radius: 30px 0 0 30px;
		}
		.shop-newsletter .newsletter-inner button{
			border:none;
			text-shadow:none;
			box-shadow:none;
			border-radius:0;
		}
		.shop-newsletter .newsletter-inner .btn {
			display: inline-block;
			height: 55px;
			padding: 10px 30px;
			position: relative;
			top: 0;
			background: #04345a;
			color: #fff;
			left: -4px;
			border-radius: 0 30px 30px 0;
			font-size: 14px;
			font-weight: 500;
			text-transform: uppercase;
		}
		.shop-newsletter .newsletter-inner .btn:hover{
			background:#333;
			color:#fff;
		}
		/*======================================
		End Shop Newsletter CSS
		========================================*/

		/*=============================
			About US CSS
		===============================*/
		.about-us{
			background:#fff;
		}
		.about-us .about-content {
			padding-right: 50px;
		}
		.about-us .about-content .story{
			display:block;
			color:#04AAF4;
			margin-bottom:20px;
			font-size:17px;
		}
		.about-us .about-content .story i{
			color:#04AAF4;
			margin-right:5px;
			font-size:22px;
		}
		.about-us .about-content h3 {
			font-size: 30px;
			font-weight: 600;
			position: relative;
			margin-bottom: 15px;
			padding-bottom: 15px;
		}
		.about-us .about-content h3::before {
			position: absolute;
			content: "";
			/* left: 0; */
			bottom: -1px;
			height: 2px;
			width: 60px;
			background: #04345a;
		}
		.about-us .about-content h3 span{
			display:inline-block;
			font-weight:700;
			color:#04345a;
		}
		.about-us .about-content p {
			line-height: 26px;
			margin-bottom: 10px;
		}
		.about-us .about-content p:last-child{
			margin:0;
		}
		.about-us .about-content .button{
			margin-top:40px;
		}
		.about-us .about-content .button .btn{
			background:#333;
			color:#fff;
			margin-right:15px;
		}
		.about-us .about-content .button .btn:hover{
			background:#04345a;
			color:#fff;
		}
		.about-us .about-content .button .btn.primary{
			background:#04345a;
			color:#fff;
		}
		.about-us .about-content .button .btn.primary:hover{
			background:#333;
			color:#fff;
		}
		.about-us .about-content .button .btn:last-child{
			margin:0;
		}
		.about-us .about-img {
			position: relative;
			-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
			border: 10px solid #fff;
		}
		.about-us .about-img:before{
			opacity:0;
			visibility:hidden;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		.about-us .about-img:hover:before{
			opacity:0.6;
			visibility:visible;
		}
		.about-us .about-img .video {
			height: 64px;
			width: 64px;
			line-height: 64px;
			background: #04345a;
			color: #fff;
			font-size: 20px;
			border-radius: 100%;
			display: block;
			text-align: center;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -32px;
			margin-top: -32px;
			padding-left: 4px;
			transform: scale(0);
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.about-us .about-img .video:hover{
			background:#fff;
			color:#04345a;
		}
		.about-us .about-img:hover .video{
			transform:scale(1);
		}
		.about-us .about-img img{
			height:100%;
			width:100%;
			
		}
		/*=============================
			End About US CSS
		===============================*/

		/*======================================
		10. Start Team CSS
		========================================*/  
		.team{
			background:#F6F7FB;
		}
		.team .title-line{
			margin-bottom:40px;
		}
		.team .single-team {
			margin-top: 30px;
			position:relative;
			-webkit-transition: all 500ms ease;
			-moz-transition: all 500ms ease;
			transition: all 500ms ease;
			display: inline-block;
			overflow:hidden;
			text-align:center;
			background:#fff;
		}
		.team .single-team .info-head {
			padding: 35px 30px;
		}
		.team .single-team .image img{
			height:100%;
			width:100%;
		}
		.team .single-team .info-box {
			text-align:center;
		}
		.team .single-team .info-box .name {
			display: block;
			font-size: 17px;
			color: #333;
			font-weight: 500;
			margin-bottom: 3px;
			text-transform:capitalize;
		}
		.team .single-team .info-box .designation{
			color:#aaa;
			font-size:13px;
		}
		.team .single-team .social-links {
			-webkit-transition: all 500ms ease;
			-moz-transition: all 500ms ease;
			transition: all 500ms ease;
			margin-top:15px;
		}
		.team .single-team .social-links .social li{
			display:inline-block;
			margin-right:15px;
		}
		.team .single-team .social-links .social li:last-child{
			margin-right:0px;
		}
		.team .single-team .social-links .social li a {
			color: #666;
			display: block;
			font-size: 14px;
		}
		.team .single-team .social-links .social li a:hover{
			color:#04345a;
		}
		/*======================================
		End Team CSS
		========================================*/ 

		/*======================================
		Start Shop Blog  offer CSS
			========================================*/
		.shop-blog.grid .shop-single-blog {
			/* margin-top: 30px; */
			position: relative;
			overflow: hidden;
			/* border-radius: 12px; */
		}

		.shop-blog .shop-single-blog {
			text-align: center;
			background: #fff;
			border-radius: 12px;
			position: relative;
			overflow: hidden;
			box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		}

		.shop-blog .shop-single-blog:hover {
			box-shadow: 0 8px 20px rgba(0,0,0,0.12);
		}

		.shop-single-blog img {
			width: 100%;
			display: block;
			aspect-ratio: 1/1;
			object-fit: contain;
			border-radius: 12px 12px 0 0;
			position: relative;
		}


		.shop-blog .shop-single-blog:hover img {
			transform: scale(1.05);
		}

		.shop-blog .shop-single-blog .content .date {
			font-size: 13px;
			font-weight: 400;
			margin-bottom: 8px;
			color: #999;
			display: block;
		}

		.shop-blog .shop-single-blog .content .title {
			font-size: 18px;
			font-weight: 700;
			color: #333;
			margin-bottom: 12px;
			transition: color 0.3s;
			display: block;
		}

		.shop-blog .shop-single-blog .content .title:hover {
			color: #04345a;
		}

		.shop-blog .shop-single-blog .content .more-btn {
			position: absolute;
			display: inline-block;
			top: 90%;
			left: 50%;
			text-align: center;
				transform: translate(-50%, -50%); 
			padding: 8px 18px;
			font-size: 14px;
			font-weight: 500;
			background: linear-gradient(135deg, #00d2d3, #01a3a4);
			color: #0e013f;
			border-radius: 25px;
			text-decoration: none;
		}


		/*======================================
		Start Shop Blog  offer CSS
			========================================*/
		/* Related Product */
		.related-product{
			padding-top:0;
		}
		.related-product .section-title {
			text-align: center;
			margin-bottom: 10px;
			padding: 0;
		}
		.related-product .section-title h2 {
			font-size: 25px;
			margin-bottom: 0;
			text-transform: capitalize;
			position: relative;
			color: #2c2d3f;
			font-weight: 700;
			padding-bottom: 15px;
		}
		/* Blog Sidebar */
		.main-sidebar {
			background: #fff;
    		position: sticky;
    		top: 20px;
			background: transparent;
			border: 1px solid #eeeeeec2;
		}
		.main-sidebar .single-widget{
			margin-bottom:50px;
			background: #fff;
    		border-radius: 8px;
    		padding: 12px 14px;
    		margin-bottom: 15px;
    		box-shadow: 0 3px 10px rgba(0,0,0,.05);
		}
		
		.single-widget .title button {
			padding: 2px 8px;
			font-size: 14px;
			line-height: 1;
		}

		.main-sidebar .single-widget .title {
			position: relative;
			font-size: 18px;
			font-weight: 600;
			text-transform: capitalize;
			margin-bottom: 30px;
			display: block;
			background: #fff;
			
			padding-inline-start: 10px;
			text-align: start;
		}
		.main-sidebar .single-widget .title::before {
			position: absolute;
			content: "";
			/* left: 0; */
			bottom: -1px;
			height: 100%;
			width: 3px;
			background: #04345a;
			inset-inline-start: 0; 
		}
		.main-sidebar .single-widget:last-child{
			margin:0;
		}
		.main-sidebar .search{
			position:relative;
		}
		.main-sidebar .search input {
			width: 100%;
			height: 45px;
			box-shadow: none;
			text-shadow: none;
			font-size: 14px;
			border: none;
			color: #222;
			background: transparent;
			padding: 0 70px 0 20px;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
			border-radius: 0;
			border: 1px solid #eee;
		}
		.main-sidebar .search .button {
			position: absolute;
			right: 0;
			top: 0;
			height: 44px;
			width: 50px;
			line-height: 45px;
			box-shadow: none;
			text-shadow: none;
			text-align: center;
			border: none;
			font-size: 14px;
			color: #fff;
			background: #333;
			-webkit-transition: all 0.4s ease;
			-moz-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.main-sidebar .search .button:hover {
			background:#04345a;
			color:#fff;
		}
		/* Category List */
		.main-sidebar .categor-list {
			margin-top: 15px;
		}

		.main-sidebar .categor-list li {
			margin-bottom: 10px;
		}
		.main-sidebar .categor-list li:last-child{
			margin-bottom:0px;
		}
		.main-sidebar .categor-list li a {
			display: inline-block;
			color: #333;
			font-size:14px;
		}
		.main-sidebar .categor-list li a:hover{
			color:#04345a;
			padding-left:7px;
		}
		.main-sidebar .categor-list li a i {
			display: inline-block;
			margin-right:0px;
			font-size: 9px;
			transform: translateY(-1px);
			opacity:0;
			visibility:hidden;
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		.main-sidebar .categor-list li a:hover i{
			margin-right: 6px;
			opacity:1;
			visibility:visible;
		}
		/* Recent Post */
		.main-sidebar .single-post {
			position: relative;
			border-bottom: 1px solid #ddd;
			/* display: inline-block; */
			/* margin: 7px 0; */
			padding: 17px 0;
		}
		.main-sidebar .single-post:last-child{
			padding-bottom:0px;
			border:none;
		}

		.main-sidebar .single-post .image img{
			float: left;
			width: 80px;
			height: 80px;
			margin-right: 20px;
		}

		.main-sidebar .single-post .content h5 {
			line-height: 18px;
		}
		.main-sidebar .single-post .content h5 a {
			color: #2C2D3F;
			font-weight: 500;
			font-size: 14px;
			font-weight: 500;
			margin-top: 10px;
			display: block;
			margin-bottom: 10px;
			margin-top: 0;
		}
		.main-sidebar .single-post .content h5 a:hover{
			color:#04345a;
		}
		.main-sidebar .single-post .content .comment li{
			color:#888;
			display:inline-block;
			margin-right:15px;
			font-weight:400;
			font-size:14px;
		}
		.main-sidebar .single-post .content .comment li:last-child{
			margin-right:0;
		}
		.main-sidebar .single-post .content .comment li i{
			display:inline-block;
			margin-right:5px;
		}
		/* Blog Tags */
		.main-sidebar .side-tags .tag{
			margin-top:40px;
		}
		.main-sidebar .side-tags .tag li {
			display: inline-block;
			margin-right: 7px;
			margin-bottom: 20px;
		}
		.main-sidebar .side-tags .tag li a {
			background: #fff;
			color: #333;
			padding: 8px 14px;
			text-transform: capitalize;
			border-radius: 0;
			font-size: 13px;
			background: #F6F7FB;
		}
		.main-sidebar .side-tags .tag a:hover{
			color:#fff;
			background:#04345a;
			border-color:transparent;
		}

		.main-sidebar .newsletter .letter-inner {
			position:relative;
			padding: 35px 30px;
			box-shadow: 0px 0px 12px #00000014;
			z-index:2;
			overflow:hidden;
		}
		.main-sidebar .newsletter .letter-inner h4 {
			text-transform: capitalize;
			margin-bottom: 25px;
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
		}
		.main-sidebar .newsletter .letter-inner p{
			margin-bottom: 20px;
		}
		.main-sidebar .newsletter .letter-inner .form-inner{
			position:relative;
		}
		.main-sidebar .newsletter .letter-inner input {
			width: 100%;
			height: 45px;
			background: #fff;
			border: none;
			border: 1px solid #ddd;
			padding: 0px 60px 0px 20px;
			box-shadow: none;
			text-shadow: none;
			border-radius: 0;
		}
		.main-sidebar .newsletter .letter-inner .form-inner a {
			height: 42px;
			width: 100%;
			background: #04345a;
			color: #fff;
			font-size: 14px;
			display: block;
			text-align: center;
			line-height: 42px;
			margin-top: 10px;
			text-transform: uppercase;
			font-weight: 500;
		}
		.main-sidebar .newsletter .letter-inner .form-inner a:hover{
			background:#333;
			color:#fff;
		}
		/* Blog Single CSS */
		.blog-single{
			background:#fff;
			/* padding:1px 0 10px; */
		}
		.blog-single .blog-single-main {
			/* margin-top: 30px; */
			background: #fff;
		}
		.blog-single .blog-detail {
			background: #fff;
		}
		.blog-single .image{
			position:relative;
			
			text-align: center;
			justify-content: center;
		}
		.blog-single .image img{
			width:100%;
			height:100%;
		}
		.blog-single .blog-title {
			font-size: 20px;
			font-weight: 400;
			text-transform: capitalize;
			margin: 5px 0 5px 0;
		}
		.blog-single .blog-meta {
			margin-bottom: 0;
			overflow: hidden;
			border-bottom: 1px solid #dddddd6e;
			padding-bottom: 5px;
			margin-bottom: 5px;
		}
		.blog-single .blog-meta .author i {
			color: #04345a;
			margin-right: 10px;
			font-size: 13px;
		}
		.blog-single .blog-meta .author a {
			font-size: 13px;
			border-right:1px solid #ddd;
			padding:0px 15px;
		}
		.blog-single .blog-meta .author  a:first-child{
			padding-left:0;
		}
		.blog-single .blog-meta .author  a:last-child{
			padding-right:0;
			border:none;
		}
		.blog-single .blog-meta span {
			display: inline-block;
			font-size: 14px;
			color: #666;
		}
		.blog-single .blog-meta span a i {
			margin-right: 10px;
			color: #04345a;
		}
		.blog-single .blog-meta span a:hover{
			color:#04345a;
		}
		.blog-single .content p {
			margin-bottom: 25px;
			line-height: 26px;
		}
		.blog-single .content p:last-child{
			margin:0;
		}
		.blog-single blockquote {
			position: relative;
			font-size: 13px;
			font-weight: 400;
			padding-left: 20px;
				/* padding: 10px 20px; */
			background: #F6F6F6;
			padding: 30px 40px 30px 70px;
			color: #555;
			border: none;
			margin-bottom: 25px;
			border-left: 3px solid #04345a;
		}
		.blog-single blockquote i {
			font-size: 30px;
			color: #04345a;
			position: absolute;
			left: 20px;
			top: 20px;
		}
		.blog-single .content .img-post{
			margin-bottom: 25px;
		}
		.blog-single .share-social .content-tags {
			position: relative;
			margin-top: 25px;
		}
		.blog-single .share-social .content-tags h4 {
			position: absolute;
			/* left: 0; */
			top: 7px;
			font-size: 15px;
			font-weight: 500;
		}
		.blog-single .share-social .content-tags .tag-inner{
			padding-left:60px;
		}
		.blog-single .share-social .content-tags .tag-inner li {
			display: inline-block;
			margin-right: 7px;
			margin-bottom: 10px;
			margin-top: 4px;
		}
		.blog-single .share-social .content-tags .tag-inner li:last-child{
			margin-right: 0px;
			margin-bottom: 0px;
		}
		.blog-single .share-social .content-tags .tag-inner li a {
			border-radius: 30px;
			padding: 5px 15px;
			background:#f4f7fc;
			font-size: 13px;
		}
		.blog-single .share-social .content-tags .tag-inner li a:hover{
			color:#fff;
			background:#04345a;
		}
		/* Comments */
		.blog-single .comments{
			margin-top:40px;
		}
		.blog-single .comments .comment-title {
			position: relative;
			font-size: 18px;
			font-weight: 600;
			text-transform: capitalize;
			margin-bottom: 30px;
			display: block;
			background: #fff;
			padding-inline-start: 10px;
			text-align: start;
		}
		.blog-single .comments .comment-title:before{
			position: absolute;
			content: " ";
			/* left: 0; */
			bottom: -1px;
			height: 100%;
			width: 3px;
			background:#04345a;
			inset-inline-start: 0;

		}

		.blog-single .comments .single-comment {
			position: relative;
			margin-bottom: 40px;
			border-radius: 5px;
			padding-left: 95px;
		}
		.blog-single .comments .single-comment.left{
			margin-left:110px;
		}
		.blog-single .comments .single-comment img {
			height: 70px;
			width: 70px;
			border-radius: 100%;
			position: absolute;
			/* left: 0; */
		}
		/* .product-show {
			display: flex;
			justify-content: center; 
			align-items: center;
			flex-wrap: wrap;
			gap: 20px; 
		}

		.image-gallery, .blog-detail {
			flex: 1; 
			max-width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center; 
			text-align: center;
		} */

		.content {
			padding: 1px;
			justify-content: center; /* يوسّط المحتوى أفقياً */
			text-align: center; /* يضمن توسيط النصوص داخل العناصر النصية */
		}
		.content-content p,
		.content-content span,
		.content-content a,
		.content-content del {
			padding: 0 20px 0 20px;
			font-size: 18px;
			text-align: center;
			width: 100%; /* يضمن تطبيق `text-align: center` بشكل صحيح */
		}


		.blog-single .single-comment .content h4 {
			color: #333;
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 10px;
			display: inline-block;
			margin-bottom: 18px;
			text-transform: capitalize;
		}
		.blog-single .single-comment .content h4 span {
			display: inline-block;
			font-size: 13px;
			color: #8D8D8D;
			margin: 0;
			font-weight: 400;
			text-transform: capitalize;
			display: block;
			margin-top: 5px;
		}
		.blog-single .single-comment .content p {
			color: #666;
			font-weight: 400;
			display: block;
			margin: 0;
			margin-bottom: 20px;
			line-height: 22px;
		}
		/* .blog-single .single-comment .content .button{}
		.blog-single .single-comment .content .btn {
			display: inline-block;
			color: #666;
			font-weight: 400;
			color: #6a6a6a;
			border-radius: 4px;
			text-transform: capitalize;
			font-size: 14px;
			background: transparent;
			padding: 0;
		} */
		.blog-single .single-comment .content a i{
			display:inline-block;
			margin-right:5px;
		}
		.blog-single .single-comment .content a:hover{
			color:#04345a;
		}
		/* Comment Form */
		.blog-single .reply form {
			padding: 40px;
			border: 1px solid #eee;
		}
		.blog-single .reply .reply-title {
			position: relative;
			font-size: 18px;
			font-weight: 600;
			text-transform: capitalize;
			margin-bottom: 30px;
			display: block;
			background: #fff;
			padding-inline-start: 10px;
			text-align: start;
		}
		.blog-single .reply .reply-title:before{
			position: absolute;
			content: "";
			/* left: 0; */
			bottom: -1px;
			height: 100%;
			width: 3px;
			background:#04345a;inset-inline-start: 0; 
		}
		.blog-single .reply .form-group {
			margin-bottom: 20px;
		}
		.blog-single .reply .form-group input {
			width: 100%;
			height: 45px;
			line-height: 50px;
			padding: 0 20px;
			border-radius: 0px;
			color: #333 !important;
			border: none;
			border: 1px solid #eee;
		}
		.blog-single .reply .form-group textarea {
			width: 100%;
			height: 200px;
			line-height: 50px;
			padding: 0 20px;
			border-radius: 0px;
			color: #333 !important;
			border: none;
			border: 1px solid #eee;
		}
		.blog-single .reply .form-group label {
			color: #333;
			position: relative;
		}
		.blog-single .reply .form-group label span {
			color:#ff2c18;
			display: inline-block;
			position: absolute;
			right: -12px;
			top: 4px;
			font-size: 16px;
		}
		.blog-single .reply .button {
			text-align: left;
			margin-bottom:0px;
		}
		.blog-single .reply .button .btn {
			height: 50px;
			border: none;
		}
		/*======================================
		End Shop Blog CSS
		========================================*/


		/*======================================
		21. Contact CSS
		========================================*/
		.contact-us {
			position: relative;
			z-index: 43;
		}
		.contact-us .title{
			margin-bottom: 30px;
		}
		.contact-us .title h4 {
			font-size: 17px;
			font-weight: 500;
			margin-bottom: 5px;
			color: #04345a;
		}
		.contact-us .title h3 {
			font-size: 25px;
			text-transform: capitalize;
			font-weight: 600;
		}
		.contact-us .single-head {
			padding: 50px;
			box-shadow: 0px 0px 15px #0000001a;
			height: 100%;
		}
		.contact-us .single-info {
			text-align: start;
			margin-bottom:30px;
		}
		.contact-us .single-info i {
			color: #fff;
			font-size: 18px;
			display: inline-block;
			margin-bottom: 15px;
			height: 40px;
			width: 40px;
			display: block;
			text-align: center;
			border-radius: 3px;
			line-height: 40px;
			background:#04345a;
		}
		.contact-us .single-info ul
		.contact-us .single-info ul li{
			margin-bottom:5px;
		}
		.contact-us .single-info ul li:last-child{
			margin-bottom:0;
		}
		.contact-us .single-info ul li a{
			font-weight:400;
		}
		.contact-us .single-info ul li a:hover{
			color:#04345a;
		}
		.contact-us .single-info .title {
			margin-bottom: 10px;
			font-weight: 500;
			color: #333;
			font-size: 18px;
		}
		.contact-us .form-main {
			box-shadow: 0px 0px 15px #0000001a;
			padding: 50px;
		}
		.contact-us .form .form-group input {
			height: 48px;
			line-height: 48px;
			width: 100%;
			border: 1px solid #e6e2f5;
			padding: 0px 20px;
			color: #333;
			border-radius: 0px;
			font-weight: 400;
		}
		.contact-us .form .form-group textarea {
			height: 180px;
			width: 100%;
			border: 1px solid #e6e2f5;
			padding: 15px 20px;
			color: #333;
			border-radius: 0px;
			resize: none;
			font-weight:400;
		}
		.contact-us .form .form-group label {
			color: #333;
			position: relative;
		}
		.contact-us .form .form-group label span {
			color: #ff2c18;
			display: inline-block;
			position: absolute;
			right: -12px;
			top: 4px;
			font-size: 16px;
		}
		.contact-us .form .button {
			margin:0;
		}
		.contact-us .form .button .btn {
			height: 50px;
			border: none;
		}
		#myMap {
			height: 500px;
			width: 100%;
		}
		/*======================================
		End Contact CSS
		========================================*/

		/* Mail Success */
		.mail-success .mail-inner {
			text-align: center;
			background: #fff;
			padding: 0px 30px;
		}
		.mail-success .mail-inner h2 {
			margin-bottom: 10px;
			display: block;
			font-weight: 600;
			color: #04345a;
			text-transform: uppercase;
			font-size: 30px;
		}
		.mail-success .mail-inner p {
			font-size: 14;
			color: #333;
			margin-bottom: 30px;
			line-height: 22px;
		}
		.mail-success .mail-inner .btn {
			color: #fff;
			padding: 10px 30px;
		}
		.mail-success .mail-inner .btn i{
			margin-right:5px;
		}

		/*=============================
			Start 404 Error CSS
		===============================*/
		.error-page {
			background:#fff;
			width: 100%;
			height: 100%;
			overflow: hidden;
			position:relative;
		}
		.error-page .error-inner {
			text-align: center;
			flex-direction: initial;
			height: auto;
			text-align: center;
		}
		.error-page .error-inner h2 {
			color: #04345a;
			margin-bottom: 0;
			font-weight: 700;
			font-size: 100px;
			display: inline-block;
			font-size: 120px;
		}
		.error-page .error-inner h5 {
			display: block;
			color: #444;
			font-size: 20px;
			margin-bottom: 20px;
			font-weight: 600;
			text-transform: capitalize;
		}
		.error-page .error-inner p {
			color: #666;
			font-weight: 400;
			line-height: 22px;
			font-size: 15px;
			padding: 0 30px;
		}
		.error-page .button {
			margin-top: 30px;
		}
		.error-page .button .btn {
			margin-right: 15px;
			border-radius: 30px;
			background: #333;
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			font-weight: 500;
			border: 1px solid #d7d7d7;
			background: transparent;
			color: #333;
			padding: 10px 28px;
		}
		.error-page .button .btn:hover{
			color:#fff;
			background:#04345a;
			border-color:transparent;
		}
		/*=============================
			/End 404 Error CSS
		===============================*/

		.free-version-banner {
		position: relative;
		background: #333;
		text-align: center;
		background-color: #04345a;
		/* margin-bottom:100px; */
		}


		.free-version-banner .section {
		position: relative;
		background: #333;
		text-align: center;
			background: transparent;
		padding: 0px !important;
		/* margin-bottom:100px; */
		}

		.free-version-banner .section-title span {
		font-weight: 500;
		text-transform: capitalize;
		}

		.free-version-banner .section-title {
		margin: 0;
		padding: 0;
		text-align: center;
		}

		.free-version-banner .section-title h2 {
		padding-bottom: 15px;
		}

		.free-version-banner .section-title h2::before {
		background-color: #fff;
		}

		.free-version-banner .button {
		z-index: 5;
		margin-top: 40px;
		}

		.free-version-banner .button .btn {
		background-color: #fff;
		color: #333;
		text-transform:capitalize;
		}

		/*=============================
			20. Start Footer CSS
		===============================*/
		.footer{
			background:#04345a;
		}
		.footer .about {
			padding-right: 50px;
		}
		.footer .single-footer h4 {
			font-size: 17px;
			font-weight: 600;
			color: white;
			text-transform: capitalize;
			margin-bottom: 10px;
		}
		.footer .about .logo{
			margin-bottom:20px;
		}
		.footer .about .text{
			color:#fff;
			font-weight: 400;
		}
		.footer .about .call {
			color: #fff;
			margin-top: 15px;
			font-weight: 400;
		}
		.footer .about .call span{
			display: block;
		}
		.footer .about .call a {
			color: #04345a;
			font-size: 20px;
			font-weight: 600;
		}
		.footer .links ul li {
			display: block;
			margin-bottom: 8px;
		}
		.footer .links ul li:last-child{
			margin-bottom:0;
		}
		.footer .links ul li a{
			color:#fff;
			font-weight: 400;
		}
		.footer .links ul li a:hover{
			color:white;
			padding-left:10px;
		}
		.footer .social .contact ul li {
			color: #fff;
			display: block;
			margin-bottom: 10px;
			font-weight: 400;
		}
		.footer .contact ul li:last-child{
			margin-bottom:0;
		}
		.footer .social ul {
			margin-top: 20px;
		}
		.footer .social ul li{
			display:inline-block;
			margin-right:25px;
		}
		.footer .social ul li:last-child{
			margin-right:0;
		}
		.footer .social ul li a{
			color:#fff;
			display:block;
			font-size:16px;
		}
		.footer .social ul li a:hover{
			color:white;
			background-color: green;
		}

		.footer .copyright .inner{
			border-top:1px solid #eeeeee3d;
			padding:20px 0;
		}
		.footer .copyright .right{
			float: inline-end;
		}
		.footer .copyright p{
			color:#fff;
		}
		.footer .copyright p a{
			color:#fff;
			text-decoration:underline;
		}
		/*=============================
			End Footer CSS
		===============================*/


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

		/* للموبايل */
		@media (max-width: 767px) {

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

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

		.logos::before, 
		.logos::after {
			content: '';
			width: auto;
			height: 60%;
			position: absolute;
			top: 20px;
			z-index: 2;
		}

		.logos::before {
			/* left: 0; */
			background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
		}

		.logos::after {
			right: 0;
			background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
		}

		.logos-slide {
			animation: 20s slide infinite linear;
		}

		.logos:hover .logos-slide {
			animation-play-state: paused;
		}

		/* direction floting for brands */
		@keyframes slide {
			from{
				transform: translateX(0);
			}

			to {
				transform: translateX(-100%);
			}
		}
		/*  */


		/* slider2 */
		.brands{
			margin:0px 50px 0px 50px;
		}
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.logos-slide {
			white-space: nowrap;
			animation: 20s slide infinite linear;
		}

		.logos:hover .logos-slide {
			animation-play-state: paused;
		}



		.card {
		position: relative;
		border: 2px solid transparent;
		transition: transform 0.2s ease;
        margin : 25px 10px 10px 20px;
        }

		.card:hover {
		transform: translateY(-8px);
		/* background-color: #E9FCE9; */
		border-color: green !important;
		}
		/* animated line on hover for card div */
		/* .card::before {
		content: "";
		position: absolute;
		top: 0; left: 0;
		width: 0; height: 2px;
		background: green;
		transition: none;
		}

		.card::after {
		content: "";
		position: absolute;
		bottom: 0; right: 0;
		width: 0; height: 2px;
		background: green;
		transition: none;
		}

		.card span {
		position: absolute;
		top: 0; bottom: 0;
		width: 2px;
		background: green;
		transform: scaleY(0);
		}

		.card span.left {
		left: 0;
		transform-origin: bottom;
		}

		.card span.right {
		right: 0;
		transform-origin: top;
		}

		.card:hover::before {
		animation: topLine 0.0s forwards;
		}

		.card:hover span.right {
		animation: rightLine 0.0s 0.0s forwards;
		}

		.card:hover::after {
		animation: bottomLine 0.0s 0.0s forwards;
		}

		.card:hover span.left {
		animation: leftLine 0.0s 0.0s forwards;
		}

		@keyframes topLine {
		from { width: 0; }
		to   { width: 100%; }
		}

		@keyframes rightLine {
		from { transform: scaleY(0); }
		to   { transform: scaleY(1); }
		}

		@keyframes bottomLine {
		from { width: 0; }
		to   { width: 100%; }
		}

		@keyframes leftLine {
		from { transform: scaleY(0); }
		to   { transform: scaleY(1); }
		}

		@keyframes glow {
		from {
			box-shadow: 0 0 5px red;
		}
		to {
			box-shadow: 0 0 20px red;
		}
		}

		@keyframes slide {
		from{
			transform: translateX(0);
		}

		to {
		transform: translateX(-100%);
		}
		} */

		/* slider2 */

		/* .text-box {
			padding: 8px 15px;
			width: fit-content;
			height: fit-content;
			border-radius: 20px;
			text-align: center;
			color: #f5f5f5;
			font-weight: 500;
			margin: 5px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-transform: uppercase;
		} */

		.gradient-box {
			background: linear-gradient(356deg, #0077ff8c, #00cc66b3, #ffffffd1);
		}

		.solid-box {
			background:rgb(83 220 143 / 50%);
		}

		.bordered-box {
			background-color: rgba(0, 204, 102, 0.1);
			border: 2px solid #00cc66;
			color: #00cc66;
		}

		.glass-box {
			position: absolute;
			background: linear-gradient(45deg, #0072ff, #00c6ff);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.3);
			color: whitesmoke;
			text-align: left;

			
		}


		[dir="rtl"] .glass-box {
			text-align: right;
		}



		.text-box {
			top: 5%;
			padding: 3px 10px;
			width: fit-content;
			height: fit-content;
			border-radius: 25px;
			font-size: 16px;
			font-weight: 600;
			margin: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-transform: uppercase;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			text-align: left !important;
		}

		[dir="rtl"] .text-box {
			text-align: right !important;
		}



		.pastel-box {
			background-color: #d1ecf1;
			color: #004085;
			border: 1px solid #bee5eb;
		}

		.soft-box {
			background: #f1f8e9;
			color: #2e7d32;
			border: 1px solid #c5e1a5;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
		}





		.image-gallery {
			display: flex;
			position: relative; 
			gap: 110px;
			align-items: center; /* Center full image vertically (if needed) */
		}

		.image-gallery .overlay-text {
			position: absolute;
			width: 190px; /* عرض مناسب للنص */
			max-width: 30%;
			top: 50%;
			transform: translateY(-50%);
			font-size: 16px;
			line-height: 1.5;
			padding: 10px;
			/* background-color: rgba(0, 0, 0, 0.6); */
			color: blue;
			border-radius: 5px;
			text-align: center;
		}

		/* عند اللغة العربية (RTL) يظهر النص على اليسار */
		[dir="rtl"] .image-gallery .overlay-text {
			left: 10px;
			direction: rtl;
		}

		/* عند اللغة الإنجليزية (LTR) يظهر النص على اليمين */
		[dir="ltr"] .image-gallery .overlay-text {
			right: 10px;
			direction: ltr;
		}


		.full-image-container {
			position: relative;

		}
		
		#full-image {
			width: 100%;
			max-width: 350px;
			max-height: 350px;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			background-color: #f8f8f8; /* لون خفيف محايد */
			padding: 15px;
			border: 1px solid #eee;
			box-shadow: 0 0 10px rgba(0,0,0,0.05);
			display: block;
			margin: 20px auto;
			border-radius: 10px;
		}

			
		.gallary-image {
			width: 100%;
			max-width: 350px;
			max-height: 350px;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			background-color: #f8f8f8; /* لون خفيف محايد */
			padding: 15px;
			border: 1px solid #eee;
			box-shadow: 0 0 10px rgba(0,0,0,0.05);
			display: block;
			margin: 20px auto;
			border-radius: 10px;
		}
		
		
		#zoom-result {
			position: absolute;
			top: -35px;
			/* left: 430px !important; */
			width: 400px;
			height: 400px;
			/* border: 1px solid #ccc; */
			background-repeat: no-repeat;
			background-size: 600px auto;
			display: none;
			z-index: 999;
		}
		html[dir="ltr"] #zoom-result {
			left: 430px !important;
			right: auto;
		}

		html[dir="rtl"] #zoom-result {
			right: 430px !important;
			left: auto;
		}

		.thumbnail-container {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		
		.thumbnail {
			width: 100px;
			height: auto;
			cursor: pointer;
			border: 2px solid transparent;
			transition: border-color 0.3s;
		}
		.thumbnail{
			width: 80px;
			height: 90px;
		}

		.thumbnail:hover {
			border-color: #007BFF;
		}
		




		
			/* Custom button for language switcher */
			.custom-lang-btn {
				display: inline-flex;
				align-items: center;
				padding: 6px 12px !important; /* Smaller padding for compact design */
				background-color: #007bff !important; /* Blue background for button */
				color: white !important;
				font-size: 14px !important; /* Smaller font size */
				font-weight: 200 !important;
				border-radius: 20px !important; /* More rounded button */
				box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1) !important; /* Light shadow */
				cursor: pointer !important;
				transition: all 0.3s ease !important; /* Smooth transition */
				text-decoration: none !important;
				text-align: center;
				white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important; /* Ensures text truncation if too long */
			}

			/* Button Hover Effect */
			.custom-lang-btn:hover {
				background-color: #0056b3 !important; /* Darker blue on hover */
				box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2) !important; /* Stronger shadow on hover */
			}

			/* Flag Styling */
			.custom-lang-flag {
				font-size: 16px !important; /* Adjust flag size */
				margin-right: 8px !important; /* Adjust spacing between flag and text */
			}

			/* Text Styling */
			.custom-lang-text {
				color: white;
			}



			.rating-btn {
				background: linear-gradient(to right, #1E90FF, #007BFF); /* DodgerBlue to Deep Blue */
				color: white;
				font-size: 20px;
				font-weight: bold;
				padding: 7px 15px;
				border: none;
				margin: 0 10px 0 10px;	
				border-radius: 10px;
				cursor: pointer;
				transition: background 0.3s ease-in-out, transform 0.2s;
			}
			
		/* Soft Sky Blue to Deep Royal Blue */
			.gradient-btn {
				background: linear-gradient(to right, #00C6FF, #0072FF); 
				color: white;
				font-size: xx-large;
				font-weight: bold;
				padding: 20px 80px;
				border-radius: 12px;
				cursor: pointer;
			}

			
		/* Deep Royal Blue to Dark Navy */
			.rating-btn {
				background: linear-gradient(to right, #004AAD, #002E73);
				color: white;
				font-size: 22px;
				font-weight: bold;
				padding: 7px 15px;
				border: none;
				border-radius: 12px;
				cursor: pointer;
				transition: all 0.3s ease-in-out;
				box-shadow: 0 4px 12px rgba(0, 46, 115, 0.4);
			}
			/* Slightly brighter deep blue */
			.rating-btn:hover {
				background: linear-gradient(to right, #0057D9, #003A99); 
				transform: scale(1.08);
				box-shadow: 0 6px 18px rgba(0, 46, 115, 0.6);
			}
			
			
			/* زر النجاح (إضافة، حفظ، إلخ) */
		.btn-success {
			background-color: #28a745;
			border: 2px solid #218838;
			color: white;
				/* padding: 10px 20px; */
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.btn-success:hover {
			background-color: #218838;
			border-color: #1e7e34;
			box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
		}
		.danger-btn {
			background-color: #dc3545;
			border: 2px solid #c82333;
			color: white;
				/* padding: 10px 20px; */
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

			.danger-btn {
			background-color: #dc3545;
				color: white;
				font-size: 22px;
				font-weight: bold;
				padding: 20px 200px;
				border: none;
				border-radius: 12px;
				cursor: pointer;
				transition: all 0.3s ease-in-out;
				box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3);
			}
		.btn-danger:hover {
			background-color: #c82333;
			border-color: #bd2130;
			box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
		}

		/* زر التعديل */
		.btn-edit {
			background-color:  #007BFF ;
			border: 2px solid #e0a800;
			color: black;
			padding: 5px;
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.btn-edit:hover {
			background-color: blue;
			border-color: #d39e00;
			box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
		}

		.btn-delete {
			background-color:  #bd2130 ;
			border: 2px solid #e0a800;
			color: black;
			padding: 5px;
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.btn-delete:hover {
			background-color: red;
			border-color: #d39e00;
			box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
		}
		/* زر الإضافة إلى السلة */
		.btn-cart {
			background-color: #28a745;
			color: #000 !important;
			border: none;
			transition: background-color 0.3s ease;
			z-index: 210;
			border: 2px solid #218838;
			color: white;
				/* padding: 10px 20px; */
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.btn-cart:hover {
			background-color: #0056b3;
			border-color: #004085;
			box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
		}

		/* زر الإضافة العام */
		.btn-add {
			background-color: #17a2b8;
			border: 2px solid #138496;
			color: white;
				/* padding: 10px 20px; */
			font-size: 16px;
			font-weight: bold;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.btn-add:hover {
			background-color: #138496;
			border-color: #117a8b;
			box-shadow: 0 4px 10px rgba(23, 162, 184, 0.4);
		}



		.banner-swiper {
			padding: 20px 0px 20px 0px !important;
		}
		

		.swiper-container {
			width: 100%;
			overflow: hidden;
				display: flex;
			align-items: center;
			position: relative;
			justify-content: center;
		}

		.swiper-slide {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 100%;
			height: 100%;
			flex-shrink: 0;
			transition: transform 0.3s ease-in-out;
			position: relative;
		}

		.swiper-slide img {
			width: 90%;
			height: 90%;
			margin: auto;
			max-height: 500px;
			display: block;
			object-fit: contain;
			border-radius: 6px;
			box-shadow: 0 4px 8px rgba(0, 0.3, 0.0, 0.4);
			margin-top: 40px;
		}

		.swiper-pagination {
			bottom: 10px !important;
		}



		@media (max-width: 480px) {
			.swiper-container {
				height: 250px;
			}
		}
		.custom-slider {
			width: 100%;
			position: relative;
		}

		.category-item {
			background: rgb(243 246 255 / 80%);
			display: flex;
			flex-direction: column;
			align-items: center;     
			justify-content: center;  
			text-align: center;
			height: 100%;            
		}

		.category-item a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;  
			height: 100%;
			text-decoration: none;
		}

		/*.category-item img {*/
		/*	background: turquoise;*/
		/*	width: 60px;*/
		/*	height: 60px;*/
		/*	object-fit: contain;*/
		/*	border-radius: 20%;*/
		/*	border: 2px solid #ddd;*/
		/*	padding: 5px;*/
		/*	background: white;*/
		/*	display: block;*/
		/*}*/
		.category-item:hover, .shop-single-blog:hover {
			box-shadow: 0 10px 25px rgba(0,0,0,0.15);
		}

		.category-name {
			margin-top: 2px;
			font-size: 14px;
			font-weight: bold;
			color: #333;
			text-align: center;
			display: flex;
			align-items: center;     
			justify-content: center;  
			overflow: hidden;          
			text-overflow: ellipsis;  
			/* white-space: nowrap;       */
		}

		.custom-next-btn, 
		.custom-prev-btn {
			width: 50px;
			height: 50px;
			border-radius: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: background 0.3s, transform 0.2s;
			z-index: 50;
		}

		.product-slider {
			position: relative;
			overflow: hidden;
			width: 100%;
			max-width: 1200px;
			margin: auto;
		}

		.product-slider-wrapper {
			display: flex;
			transition: transform 0.5s ease-in-out;
		}
		.in-stock {
			color: green;
			font-weight: bold;
		}
		.low-stock {
			color: orange;
			font-weight: bold;
		}
		.out-of-stock {
			color: red;
			font-weight: bold;
		}

		.product-slide {
			flex: 0 0 20%;
			box-sizing: border-box;
			padding: 10px;
			text-align: center;
		}

		.product-content {
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}


		.product-info {
			text-align: center;
			line-height: 8px !important;
		}

		.product-name {
			font-size: 14px;
			margin: 5px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 90%;
			position: relative;
			cursor: pointer;
		}



		.product-price {
			font-size: 14px;
			color: #777;
			margin: 5px 0;
		}




		.product-prev-btn,
		.product-next-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(0, 0, 0, 0.5);
			color: white;
			border: none;
			padding: 10px;
			cursor: pointer;
			font-size: 20px;
			border-radius: 50%;
			z-index: 10;
		}

		.product-prev-btn { left: 10px; }
		.product-next-btn { right: 10px; }

		.btn {
			display: inline-block;
			padding: 5px 9px;
			font-weight: bold;
			text-transform: uppercase;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.3s ease;
			border: none;
			text-align: center;
			min-width: 120px;
		}

		.btn-lang {
			display: flex;
			align-items: center;
			gap: 8px;
			margin: 5px;
			padding: 2px 15px;
			font-size: 16px;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			cursor: pointer;
			border-radius: 6px;
			transition: all 0.3s ease;
			background: #04345a;
			/* color: white; */
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
		}

		.btn-lang:hover {
			background: #2bc700;
			transform: scale(1.05);
		}

		.btn-lang-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			font-size: 18px;
			background: linear-gradient(45deg, #0077ff, #00cc66);
			color: white;
			border: none;
			cursor: pointer;
			transition: 0.3s;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
		}

		.btn-lang-icon:hover {
			background: linear-gradient(45deg, #0055cc, #00994d);
			transform: scale(1.1);
		}
		.btn-send {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 12px 24px;
			font-size: 16px;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			cursor: pointer;
			border-radius: 25px;
			transition: all 0.3s ease-in-out;
			background: linear-gradient(45deg, #e3f2fd, #c8e6c9, #e8f5e9);
			color: #003366;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			outline: none;
		}

		.btn-send:hover {
			background: linear-gradient(45deg, #d1ecf1, #b2dfdb, #f1f8e9);
			transform: scale(1.05);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		}


		.btn-category {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 12px 24px;
			font-size: 16px;
			font-weight: 600;
			text-transform: capitalize;
			border: none;
			cursor: pointer;
			border-radius: 30px;
			transition: all 0.3s ease-in-out;
			background: linear-gradient(135deg, #e3f2fd, #c8e6c9, #e8f5e9);
			color: #004d40;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			outline: none;
		}

		/* تأثير التحويم */
		.btn-category:hover {
			background: linear-gradient(135deg, #d1ecf1, #b2dfdb, #f1f8e9);
			transform: scale(1.05);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		}

		/* تحريك الأيقونة عند التحويم */
		.btn-category i {
			transition: transform 0.3s ease;
		}

		.btn-category:hover i {
			transform: rotate(10deg);
		}


		.swiper-container, .custom-slider {
			z-index: 0 !important;
		}
		.child-dropdown {
			display: none;
			position: absolute;
			background: #fff;
			list-style: none;
			padding: 10px;
			margin: 0;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
			/* min-width: 200px; */
			left: 100%;
			top: 0;
			border-radius: 25px;
		}

		.parent-item:hover > .child-dropdown {
			display: block;
		}

		/* المؤشر عند الضغط */
		.submenu-toggle {
			cursor: pointer;
			margin-left: 5px;
		}
		html[dir="rtl"] .child-dropdown {
			left: auto;
			right: 100%;
		}

		html[dir="ltr"] .child-dropdown {
			left: 100%;
			right: auto;
		}

		.child-dropdown li {
			padding: 5px 10px;
			transition: background 0.3s ease;
		}

		/* لما تحط الماوس على عنصر معين يتلون لوحده بس */
		.child-dropdown li a {
			background-color: white !important;
			color: black;
		}
		.child-dropdown li a:hover {
			background-color: #2bc700 !important;
			/* color: white; */
		}

		.fa-bars{
			font-size: large !important;

		}




		.button {
			position: relative;
			display: inline-block;
			/* padding: 12px 24px; */
			font-size: 16px;
			color: white;
			background: #333;
			border: none;
			cursor: pointer;
			overflow: hidden;
			transition: color 0.4s;
		}

		.button::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 0;
			/* left: 0; */
			bottom: 0;
			/* background: #ff6a00; لون الهوفر */
			transition: height 0.4s ease-in-out;
		}

		.button:hover::before {
			height: 100%;
		}

		.button:hover {
			color: #fff;
		}

		.brand-item {
			flex: 0 0 auto;
			padding: 0 10px;
		}

		.brand-item img {
			width: 100px !important;
			height: 100px !important;
			object-fit: contain;
			display: block;
		}
		@keyframes scroll-left {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(-50%); /* يتحرك لنصف المسار */
			}
		}


		.default-img {
			height: 90%;
			width: 100%;
			overflow: hidden;
			display: flex;
			/*object-fit:contain;*/
			align-items: center;
			justify-content: center;
			/*background: #fff;*/
		}


		.default-pro-img {
			height: 230px;
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
		}

		.single-pro-img {
			height: 230px;
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
		}
		.rtl-flex {
			flex-direction: row-reverse;
		}

		.ltr-flex {
			flex-direction: row;
		}


		.bread-list {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.bread-list li {
			white-space: nowrap;
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #fff;
		}

		.bread-list li a {
			color: #fff;
			text-decoration: none;
		}

		.bread-list li a i {
			margin: 0 5px;
		}
		.bread-inner {
			width: 100%;
		}
		/* Progress Bar */

		.order-progress .progress-step {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin: 0 auto;
			position: relative;
			z-index: 1;
		}
		.order-progress .progress-line {
			position: absolute;
			top: 35%;
			left: -50%;
			width: 100%;
			height: 40%;
			z-index: 0;
			transform: translateY(-50%);
			border-radius: 2px;
		}

		/* Responsive */
		@media (max-width: 768px) {
			.cat-nav-head{
				display: none;
			}

			.order-progress small {
				font-size: 10px;
			}
			.order-progress .progress-step {
				width: 20px;
				height: 20px;
			}
				.swiper-container {
				height: 300px;
			}
		}

		/* RTL support */
		html[dir="rtl"] .order-progress {
			direction: rtl;
		}


		html[dir="rtl"] .order-progress .progress-line {
			direction: rtl;
			left: 50%;

		}


		@media (max-width: 576px) {
			.product-slide {
				flex: 0 0 40%;
				margin: 0 auto;
			}

			.product-slide img {
				height: 150px !important;
				object-fit: contain;
				filter: contrast(0.5) saturate(0.5) !important;
			}

			.product-slider-wrapper {
				display: flex;
				gap: 10px;
			}
		}

		.product-slide .product-image {
			width: 100% !important;
			height: 250px !important;
			display: flex !important;
			aspect-ratio: 1 / 1;
			justify-content: center !important;
			align-items: center !important;
			overflow: hidden !important;
			background: #fff !important;
			border-radius: 10px !important;
			filter: contrast(1) saturate(1) !important;
		}

		.product-slide .product-image img {
			width: 90% ;
			height: 90% ;
			object-fit: contain ;
			object-position: center ;
			transition: none
			filter: contrast(1) saturate(1);
		}



		img {
			filter: contrast(1) saturate(0.9) sepia(0.01) brightness(1.05) ;
			width: 100% ;
			height: 100%;
			object-fit: cover;
		}



		/* RESET CSS */ 
		/*--------------------------------------------------------------
		# Normalize
		--------------------------------------------------------------*/
		html {
			font-family: 'Poppins', sans-serif;
			-moz-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}
		html,body {
			/*height: 100%;*/
			margin: 0;
		}
		*{
			padding:0;
			margin:0;
		}
		body {
			margin: 0;
		}
		img{
			max-width:100%;
		}
		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		main,
		menu,
		nav,
		section,
		summary {
			display: block;
		}
		audio,
		canvas,
		progress,
		video {
			display: inline-block;
			vertical-align: baseline;
		}
		audio:not([controls]) {
			display: none;
			height: 0;
		}
		[hidden],
		template {
			display: none;
		}
		a {
			text-decoration:none;
		}
		a:active,
		a:hover {
			outline: 0;
			text-decoration:none;
		}
		.slicknav_menu{
			display:none;
		}
		.table {
			display: table;
			width: 100%;
			height: 100%;
		}
		.table-cell {
			display: table-cell;
			vertical-align: middle;
		}

		svg:not(:root) {
			overflow: hidden;
		}
		figure {
			margin: 1em 40px;
		}
		hr {
			box-sizing: content-box;
			height: 0;
		}
		pre {
			overflow: auto;
		}
		button,
		input,
		optgroup,
		select,
		textarea {
			color: inherit;
			font: inherit;
			margin: 0;
		}
		button {
			overflow: visible;
		}
		button,
		select {
			text-transform: none;
		}
		button,
		html input[type="button"],
		input[type="reset"],
		input[type="submit"] {
			-webkit-appearance: button;
			cursor: pointer;
		}
		button[disabled],
		html input[disabled] {
			cursor: default;
		}
		button::-moz-focus-inner,
		input::-moz-focus-inner {
			border: 0;
			padding: 0;
		}
		input {
			line-height: normal;
		}
		input[type="checkbox"],
		input[type="radio"] {
			box-sizing: border-box;
			padding: 0;
		}
		input[type="number"]::-webkit-inner-spin-button,
		input[type="number"]::-webkit-outer-spin-button {
			height: auto;
		}
		input[type="search"]::-webkit-search-cancel-button,
		input[type="search"]::-webkit-search-decoration {
			-webkit-appearance: none;
		}
		legend {
			border: 0;
			padding: 0;
		}
		textarea {
			overflow: auto;
		}
		optgroup {
			font-weight: bold;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		td,
		th {
			padding: 0;
		}
		/*--------------------------------------------------------------
		# Typography
		--------------------------------------------------------------*/

		button,
		input,
		select,
		optgroup,
		textarea {
			color: #424646;
			font-family: 'Poppins', sans-serif;
			font-weight:400;
			font-size: 14px;
			line-height: 24px;
		}
		h1, h2, h3, h4, h5, h6 {
			font-weight: 700;
			margin: 0;
		}
		p {
			color:#757575;
			margin: 0;
			line-height:24px;
		}
		a,button,input{
			font-weight:400;
		}
		img,a,input,h1, h2, h3, h4, h5, h6{
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		dfn, cite, em, i {
			font-style: italic;
		}
		address {
			margin: 0 0 1.5em;
		}
		pre {
			background: #eee;
			font-family: 'Poppins', sans-serif;
			font-size: 15px;
			font-size: 0.9375rem;
			line-height: 1.6;
			margin-bottom: 1.6em;
			max-width: 100%;
			overflow: auto;
			padding: 1.6em;
		}
		code, kbd, tt, var {
			font-family: 'Poppins', sans-serif;
			font-size: 15px;
			font-size: 0.9375rem;
		}

		abbr, acronym {
			border-bottom: 1px dotted #666;
			cursor: help;
		}

		mark, ins {
			background: #fff9c0;
			text-decoration: none;
		}

		big {
			font-size: 125%;
		}

		.section {
			/* padding: 100px 0; */
			position: relative;
				background: transparent;

		}
		.section-title {
			text-align: center;
			margin-bottom: 50px;
			padding: 0 15px;
		}
		.section-title h2 {
			font-size: 30px;
			margin-bottom: 0;
			text-transform: capitalize;
			position: relative;
			color: #2c2d3f;
			font-weight: 700;
			margin-bottom: 10px;
			padding-bottom: 15px;
		}
		.section-title h2::before {
			position: absolute;
			content: "";
			height: 2px;
			width: 50px;
			background: #F7941D;
			left: 50%;
			bottom: 0;
			margin-left: -25px;
		}
		.section-title p {
			font-size: 14px;
			color: #666;
		}
		.container{
			max-width:1170px;
		}
		.overlay{
			position:relative
		}
		.overlay::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.4;
			background: #000;
			content: "";
			-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			transition:all 0.4s ease;
		}
		/* Bread Crumbs */
		.breadcrumbs {
			background-color: #F6F7FB;
			position: relative;
			padding: 5px 0px;
				text-align: -webkit-auto;

		}

		.breadcrumbs .bread-list {
			display: inline-block;
		}
		.breadcrumbs ul li{
			display: inline-block;
			position: relative;
		}
		.breadcrumbs ul li i {
			margin: 0px 10px;
			font-size: 9px;
			font-weight: 600;
			color: #333;
		}
		.breadcrumbs ul li a {
			color: #333;
			font-size: 14px;
			font-weight: 400;
			text-transform: capitalize;
		}
		.breadcrumbs ul li.active a {
			color: #333;
			display: inline-block;
		}
		.breadcrumbs ul li a:hover{
			color:#F7941D;
		}

		.icon {
		width:75%;
		height:75%;
		top:5%;
		left:0;
		animation:cp-preloader-anim 1s linear infinite alternate backwards;
		}

		@keyframes cp-preloader-anim {
		0% {
		transform:translate3d(0,.0375em,0) rotate(45deg)
		}
		to {
		transform:translate3d(.075em,.075em,0) rotate(45deg)
		}
		}
		/*--------------------------------------------------------------
		# Elements
		--------------------------------------------------------------*/
		html {
			box-sizing: border-box;
		}

		*,
		*:before,
		*:after {
			/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
			box-sizing: inherit;
		}

		body {
			background: linear-gradient(to bottom, #e0e5ea, #ffffff);
		}

		hr {
			background-color: #ccc;
			border: 0;
			height: 1px;
			margin-bottom: 1.5em;
		}

		ul,ul li{
			list-style:none;
			padding:0;
			margin:0;
		}

		li > ul,
		li > ol {
			margin-bottom: 0;
			margin-left: 1.5em;
		}

		dt {
			font-weight: bold;
		}

		dd {
			margin: 0 1.5em 1.5em;
		}



		figure {
			margin: 1em 0;
			/* Extra wide images within figure tags don't overflow the content area. */
		}

		table {
			margin: 0 0 1.5em;
			width: 100%;
		}

		/*--------------------------------------------------------------
		# Forms
		--------------------------------------------------------------*/
		button,
		input[type="button"],
		input[type="reset"],
		input[type="submit"] {
			border: 1px solid;
			border-color: #ccc #ccc #bbb;
			border-radius: 3px;
			background: #e6e6e6;
			color: rgba(0, 0, 0, 0.8);
			line-height: 1;
		}

		input[type="text"],
		input[type="email"],
		input[type="url"],
		input[type="password"],
		input[type="search"],
		input[type="number"],
		input[type="tel"],
		input[type="range"],
		input[type="date"],
		input[type="month"],
		input[type="week"],
		input[type="time"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="color"],
		textarea {
			color: #666;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding: 3px;
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="url"]:focus,
		input[type="password"]:focus,
		input[type="search"]:focus,
		input[type="number"]:focus,
		input[type="tel"]:focus,
		input[type="range"]:focus,
		input[type="date"]:focus,
		input[type="month"]:focus,
		input[type="week"]:focus,
		input[type="time"]:focus,
		input[type="datetime"]:focus,
		input[type="datetime-local"]:focus,
		input[type="color"]:focus,
		textarea:focus {
			color: #111;
		}

		select {
			border: 1px solid #ccc;
		}

		textarea {
			width: 100%;
		}

		/*--------------------------------------------------------------
		# Navigation
		--------------------------------------------------------------*/
		/*--------------------------------------------------------------
		## Links
		--------------------------------------------------------------*/
		a {
			color: inherit;
		}


		a:hover, a:focus, a:active {
			color: inherit;
		}

		a:hover, a:active {
			outline: 0;
		}




		.category-hover {
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			cursor: pointer;
		}
		.category-hover:hover {
			transform: translateY(-5px) scale(1.03);
			box-shadow: 0 10px 20px rgba(0,0,0,0.15);
		}
		.category-img-wrapper {
			transition: transform 0.3s ease;
		}
		.category-hover:hover .category-img-wrapper {
			transform: scale(1.05);
		}




		/* ===============================
		أساسي – يعمل مع الاتجاهين
		================================ */

		.header .shopping-list .cart-img {
			float: inline-end;
			border: 1px solid #ededed;
			overflow: hidden;
		}

		.shop.checkout .single-widget .content ul {
			margin-top: 30px;
		}

		.shop.checkout .single-widget .content ul li {
			display: block;
			padding-inline: 30px;
			font-size: 15px;
			font-weight: 400;
			color: #333;
			margin-bottom: 12px;
		}

		.shop.checkout .single-widget .content ul li span{
			display: inline-block;
			float: inline-start;
			margin-inline-end: 15px;
		}

		.shop.checkout .single-widget .content ul li.last {
			padding-top: 12px;
			border-top: 1px solid #ebebeb;
			font-size: 15px;
			font-weight: 400;
			color: #333;
		}

		.shop.checkout .single-widget h2:before {
			position: absolute;
			content: "";
			inset-inline-start: 30px;
			bottom: 0;
			height: 2px;
			width: 50px;
			background: #04345a;
		}

		.midium-banner .single-banner .content {
			inset-inline-start: 0 !important;
		}

		.header.shop .search-bar .btnn {
			height: 400px;
			line-height: 50px;
			text-align: center;
			font-size: 30px;
			padding: 30px;
			color: #fff;
			background: #04345a;
			position: absolute;
			top: 4px;
			border: none;
			border-radius: 0 5px 5px 0;
		}

		/* القائمة المنسدلة */
		.header .nav li .dropdown {
			border-radius: 30px;
			background: #fff;
			width: 150%;
			position: absolute;
			top: 100%;
			z-index: 999;
			transition: all 0.3s ease;
			opacity: 0;
			visibility: hidden;
			padding: 10px;
			inset-inline-start: 0;
			margin: 0;
		}

		/* البريـدكرام */
		.breadcrumbs .bread-inner {
			z-index: 22;
			text-align: start;
		}



		html[dir="rtl"] {
			direction: rtl;
		}

		html[dir="ltr"] {
			direction: ltr;
		}

		/* لو عندك حاجات لازم تتعدل في RTL تحديداً */
		html[dir="rtl"] .header .nav li .dropdown {
			text-align: right;
		}

		html[dir="ltr"] .header .nav li .dropdown {
			text-align: left;
		}
		/* الصندوق الأساسي */
		.offer-img-wrapper {
			position: relative;
			overflow: hidden;
		}

		/* زر التفاصيل في منتصف الصورة */
		.details-btn-centered {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 10px 18px;
			background: rgba(0, 0, 0, 0.55);
			color: #fff;
			font-weight: 600;
			border-radius: 30px;
			text-decoration: none;
			backdrop-filter: blur(4px);
			transition: 0.25s ease-in-out;
		}
		.details-btn-centered:hover {
			background: rgba(0, 0, 0, 0.75);
		}

		/* بادج الخصم */
		.discount-badge {
			position: absolute;
			top: 10px;
			padding: 6px 12px;
			font-weight: bold;
			color: #fff;
			border-radius: 8px;
			font-size: 14px;
			z-index: 10;
			background: linear-gradient(135deg, #00d084, #00a2ff);
			box-shadow: 0 3px 10px rgba(0,0,0,0.25);
		}

		/* الاتجاه في العربية */
		html[dir="rtl"] .discount-badge {
			right: 10px;   /* يمين */
		}

		/* الاتجاه في الإنجليزية */
		html[dir="ltr"] .discount-badge {
			left: 10px;    /* شمال */
		}

	.banner
	{
			align-items: center;
			text-align: center;
	}
	.banner-static img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	display: block;
			align-items: center;
			text-align: center;
	}

	.banner-static {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	}

	/* =========================
	HEADER
	========================= */
	.mas-header {
		font-family: var(--mas-font);
		background: #fff;
		position: relative;
		z-index: 999;
	}

	/* =========================
	TOPBAR
	========================= */
	.mas-topbar {
		background: #fff;
		border-bottom: 1px solid #e5e7eb;
		font-size: 13px;
	}

	.mas-top-left,
	.mas-top-right {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.mas-top-right {
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.mas-top-right a {
		color: #0b2a4a;
		text-decoration: none;
		transition: .3s;
	}

	.mas-top-right a:hover {
		color: var(--mas-accent);
	}

	/* =========================
	ICONS
	========================= */
	.mas-icons {
		position: relative;
		display: flex;
		gap: 10px;
	}

	.mas-cart-count {
		position: absolute;
		top: -6px;
		inset-inline-end: -6px;
		background: var(--mas-accent);
		color: #121010;
		font-size: 10px;
		border-radius: 50%;
		padding-top: 5px;
	}

	/* =========================
	NAVBAR
	========================= */
	.mas-navbar {
		/*background: var(--mas-main);*/
		transition: .3s;
		background : #04345a;
	}

	.mas-navbar.mas-is-sticky {
		position: fixed;
		top: 0;
		inset-inline: 0;
		box-shadow: 0 10px 25px rgba(0,0,0,.15);
	}

	.masnav-inner {
		display: flex;
		align-items: center;
		gap: 20px;
		min-height: 60px;
	}

	/* LOGO */
	.masnav-logo img {
		max-height: 22px;
	}

	/* =========================
	MENU
	========================= */
	.masnav-nav {
		flex: 1;
	}

	.masnav-menu {
		display: flex;
		align-items: center;
		gap: 24px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.masnav-menu > li > a {
		color: #fff;
		text-decoration: none;
		font-size: 14px;
		padding: 10px 0;
	}

	/* =========================
	DROPDOWN (DESKTOP)
	========================= */
	.has-dropdown {
		position: relative;
	}
	/* =========================
	DESKTOP DROPDOWN SYSTEM
	========================= */
	@media (min-width: 992px) {

		/* Parent dropdown */
		.masnav-dropdown {
			position: absolute;
			top: 100%;
			inset-inline-start: 0;
			background: #ffffff;
			min-width: 240px;
			border-radius: 10px;
			box-shadow: 0 15px 35px rgba(0,0,0,.12);
			padding: 10px 0;

			opacity: 0;
			visibility: hidden;
			transform: translateY(12px);
			transition: .3s ease;
			z-index: 999;
		}

		.has-dropdown:hover > .masnav-dropdown {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		/* Parent item */
		.masnav-dropdown > li > a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 18px;
			font-size: 14px;
			color: #0b2a4a;
			text-decoration: none;
			transition: .25s;
		}

		.masnav-dropdown > li > a:hover {
			background: #f3f6fb;
			color: var(--mas-accent);
		}

		/* =========================
		SUB DROPDOWN
		========================= */
		.masnav-subdropdown {
			position: absolute;
			top: 0;
			background: #ffffff;
			min-width: 220px;
			border-radius: 10px;
			box-shadow: 0 15px 35px rgba(0,0,0,.12);
			padding: 10px 0;

			opacity: 0;
			visibility: hidden;
			transform: translateX(10px);
			transition: .3s ease;
		}

		/* LTR */
		html[dir="ltr"] .masnav-subdropdown {
			inset-inline-start: 100%;
		}

		/* RTL */
		html[dir="rtl"] .masnav-subdropdown {
			inset-inline-end: 100%;
			transform: translateX(-10px);
		}

		/* Show sub on hover parent */
		.has-sub:hover > .masnav-subdropdown {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
		}

		/* Sub item */
		.masnav-subdropdown a {
			display: block;
			padding: 10px 18px;
			font-size: 13px;
			color: #0b2a4a;
			text-decoration: none;
			transition: .25s;
			white-space: nowrap;
		}

		.masnav-subdropdown a:hover {
			background: #f3f6fb;
			color: var(--mas-accent);
		}

	}


	/* =========================
	SEARCH
	========================= */
	.masnav-search input {
		border: none;
		padding: 8px 14px;
		border-radius: 20px;
	}

	/* =========================
	TOGGLE
	========================= */
	.masnav-toggle {
		display: none;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
	}

	.masnav-toggle span {
		width: 24px;
		height: 2px;
		background: #fff;
	}

	/* =========================
	MOBILE
	========================= */
	@media (max-width: 991px) {

		.masnav-toggle {
			display: flex;
		}

		.masnav-nav {
			display: none;
			position: absolute;
			top: 100%;
			inset-inline: 0;
			background: var(--mas-main);
			padding: 20px;
		}

		/* ⭐️ السطر اللي كان ناقصك */
		.masnav-nav.mas-menu-open {
			display: block;
		}

		.masnav-menu {
			flex-direction: column;
			align-items: flex-start;
		}

		.masnav-dropdown {
			position: static;
			opacity: 1;
			visibility: visible;
			transform: none;
			background: transparent;
		}

		.masnav-dropdown a {
			color: #fff;
		}
	}

	@media (max-width: 991px) {

		/* لوحة المينيو نفسها */
		.masnav-nav {
			background: #09223b;
			border-top: 1px solid rgba(255,255,255,.08);
			border-radius: 0 0 14px 14px;
		}

		/* Parent items */
		.masnav-menu > li > a {
			color: #ffffff;
			width: 100%;
			padding: 12px 0;
			font-weight: 500;
		}

		/* خطوط فاصلة ناعمة */
		.masnav-menu > li {
			border-bottom: 1px solid rgba(255,255,255,.06);
		}

		.masnav-menu > li:last-child {
			border-bottom: none;
		}

		/* dropdown container */
		.masnav-dropdown {
			background: rgba(255,255,255,.04);
			margin-top: 6px;
			padding: 8px 12px;
			border-radius: 10px;
		}

		/* sub dropdown */
		.masnav-subdropdown {
			background: rgba(255,255,255,.06);
			margin-top: 6px;
			padding: 6px 12px;
			border-radius: 8px;
		}

		/* text colors */
		.masnav-dropdown a,
		.masnav-subdropdown a {
			color: #e5ecf3;
		}

		.masnav-dropdown a:hover,
		.masnav-subdropdown a:hover {
			color: var(--mas-accent);
		}
	}

	/* Checkbox Hack */
	.sidebar-checkbox {
		display: none;
	}

	/* Toggle Button */
	.sidebar-toggle-btn {
		position: fixed;
		top: 0;
		inset-inline-end: 0;
		z-index: 1000;
		background-color: #28a745;
		color: #fff;
		padding: 12px 15px;
		cursor: pointer;
		border-radius: 5px 0 0 5px;
		font-size: 20px;
		font-weight: bold;
	}

	/* Sidebar */
	.category-sidebar {
		position: fixed;
		top: 0;
		inset-inline-end: -280px;
		width: 280px;
		height: 100vh;
		background-color: #fff;
		box-shadow: -3px 0 12px rgba(0,0,0,0.15);
		transition: right 0.3s ease;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		z-index: 999;
	}

	.sidebar-checkbox:checked ~ .category-sidebar {
		inset-inline-end: 0;
	}

	/* Header */
	.sidebar-header {
		padding: 15px;
		border-bottom: 1px solid #ddd;
		font-weight: bold;
		font-size: 18px;
	}

	/* Sidebar Content */
	.sidebar-content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 10px;
	}

	/* Category Link */
	.category-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 5px;
		border-radius: 5px;
		text-decoration: none;
		color: #333;
		transition: background 0.2s;
	}

	.category-link:hover {
		background-color: #f5f5f5;
	}

	/* Category Image */
	.category-img-wrapper {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.category-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Responsive */
	@media (max-width: 768px) {
		.category-sidebar {
			width: 80%;
			right: -80%;
		}
	}
	/* Sidebar Wrapper */
	.sidebar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		display: flex;
		align-items: flex-start;
		z-index: 9999;
	}

	/* Sidebar */
	.sidebar {
		position: relative;
		left: -260px; /* hidden by default */
		width: 260px;
		height: 100%;
		background-color: #fff;
		box-shadow: 3px 0 12px rgba(0,0,0,0.15);
		transition: left 0.3s ease;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		border-right: 1px solid #ddd;
	}

	.sidebar-wrapper:hover .sidebar,
	.sidebar-wrapper:focus-within .sidebar {
		left: 0;
	}

	/* Header */
	.sidebar-header {
		padding: 15px;
		border-bottom: 1px solid #ddd;
		font-weight: bold;
		font-size: 18px;
	}

	/* Category Links */
	.sidebar-content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 10px;
	}

	.category-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 5px;
		border-radius: 5px;
		text-decoration: none;
		color: #333;
		transition: background 0.2s;
	}

	.category-link:hover {
		background-color: #f5f5f5;
	}

	/* Category Image */
	.category-img-wrapper {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.category-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Toggle Button */
	.sidebar-toggle {
		width: 40px;
		height: 40px;
		background-color: #007bff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 5px;
		margin-left: 10px;
		font-size: 20px;
	}

	/* Responsive */
	@media (max-width: 768px) {
		.sidebar {
			width: 80%;
			left: -80%;
		}
	}


#scrollUp .fa-angle-up {
  background: #04345a;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* السهم */
#scrollUp .fa-angle-up::before {
  content: '';
  width: 10px;
  height: 10px;
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(45deg);
  margin-top: 4px;
}