/* ===== legacy-theme rules still required by shop pages =====
 * Carried over from assets/theme/css/custom.css and custom2.css when the legacy
 * theme stack was switched off for the storefront (see lean_theme()).
 * Selected by matching against the real rendered HTML of the shop pages, not by hand.
 * Originals remain untouched in assets/theme/css/_originals/.
 */

/* --- from custom.css --- */
/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Toplax - Factory & Industry HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Service css
07. Our Story css
08. What We Do css
09. Our Work css
10. Our Process css
11. Our Pricing css
12. Our Testimonial css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Services Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css
23. Team Page css
24. Pricing Page css
25. Testimonial Page css
26. Image Gallery css
27. Video Gallery css
28. FAQs Page css
29. Contact Us Page css
30. 404 Page css
31. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/	

:root{
	--primary_color			: #2D2A26;
	--primary-color			: #2D2A26;
	--secondary-color		: #F6DFA4;
	--text-color			: #81848A;
	--accent-color			: #FAF0D2;
	--white-color			: #FFFFFF;
	--divider-color			: #EBEBEB;
	--dark-divider-color	: #FFFFFF1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Manrope", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7em;
	color: var(--text-color);
}

p{
	line-height: 1.7em;
	margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 0.6em;
	text-transform: capitalize;
	color: var(--primary-color);
	background-color: var(--accent-color);
	border-radius: 10px;
	padding: 2px 40px 2px 2px;
	border: none;
	overflow: hidden;
	transition: all 0.5s ease-in-out;
}

.btn-default:hover{
	background-color: transparent;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px auto;
	transform: translate(-15px, -50%);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover::before{
	transform: translate(-15px, -50%) rotate(45deg);
}

.btn-default::after{
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: auto;
	right: 0;
    bottom: 0;
	width: 0;
	height: 100%;
	border-radius: 8px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.btn-default:hover::after{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-default span{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	background-color: var(--white-color);
	color: var(--primary-color);
	border-radius: 8px;
	padding: 15px 20px;
	overflow: hidden;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.btn-default:hover span{
	background-color: transparent;
	color: var(--primary-color);
}

.btn-default span::after{
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: auto;
	right: 0;
    bottom: 0;
	width: 0;
	height: 100%;
	border-radius: 8px;
    background: var(--accent-color);
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover span::after{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-highlighted{
	background-color: var(--white-color);
}

.btn-highlighted:hover{
	background-color: var(--primary-color);
}

.btn-highlighted::before{
	background-image: url('../images/arrow-dark.svg');
}

.btn-highlighted:hover::before{
	filter: brightness(0) invert(1);
}

.btn-highlighted span{
	color: var(--white-color );
	background-color: var(--accent-color);
}

.btn-highlighted:hover span{
	color: var(--primary-color);
}

.btn-highlighted span::after{
    background: var(--white-color);
}


.loading:not(.product_card_header .loading){
	height: 180px;
	position: relative;
	width: 180px;
	border-radius: 100%;
}

.loading:not(.product_card_header .loading){
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 14px;
    font-weight: 700;
	line-height: normal;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
	padding-left: 26px;
    margin-bottom: 15px;
}

.section-title h3::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

.section-title h1{
	font-size: 70px;
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 50px;
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: -0.01em;
	color: var(--primary-color);
	margin-bottom: 0;
	cursor: none;
}


.section-title h1 span,
.section-title h2 span{
	font-weight: 700;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

.topbar{
	padding: 20px 0;
}

/************************************/
/***        04. Hero css	      ***/
/************************************/


.hero{
	padding: 150px 0 40px;
	position: relative;
	/* background: url('../images/hero-bg.jpg') no-repeat; */
	background: url('../../../storage/image/2026/01/1-1768198837.jpeg') no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: linear-gradient(270deg, transparent 42.92%, rgba(0, 0, 0, 0.5) 100%); */
	background: 
	linear-gradient(to bottom, transparent 50%, #0E1E3F 100%),
	linear-gradient(to left,  transparent 50%, #0E1E3F 100%);

    width: 100%;
    height: 100%;
    z-index: 1;
}

/************************************/
/***      05. About Us css	      ***/
/************************************/

/************************************/
/***     06. Our Service css      ***/
/************************************/

.our-services .container{
	position: relative;
	z-index: 1;
}

/************************************/
/***       07. Our Story css      ***/
/************************************/

/************************************/
/***       08. What We Do css     ***/
/************************************/

.what-we-do .container-fluid{
	padding: 0;
}

@keyframes contactrotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}

/************************************/
/***       09. Our Work css       ***/
/************************************/

/************************************/
/***      10. Our Process css     ***/
/************************************/

/************************************/
/***      11. Our Pricing css     ***/
/************************************/

/************************************/
/***    12. Our Testimonial css   ***/
/************************************/

/************************************/
/***       13. Our Blog css       ***/
/************************************/

/************************************/
/***        14. Footer css        ***/
/************************************/

/************************************/
/***     15. About Us Page css    ***/
/************************************/

.page-header{
	position: relative;
	/* background: url('../images/page-header-bg.jpg') no-repeat center center; */
	/* background: url('../../../storage/image/2026/01/1-1768198837.jpeg') no-repeat center center; */
	background: url('../../../storage/image/2026/06/9013-1780810299.jpg') no-repeat center center;
	background-size: cover;
	padding: 150px 0;
}

.page-header::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 23.99%, rgba(0, 0, 0, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	z-index: 1;
}

.page-header-box h1{
    color: var(--white-color);
    font-size: 70px;
    font-weight: 300;
    line-height: 1.2em;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
    cursor: none;
}

.page-header-box h1 span{
	font-weight: 700;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol li.breadcrumb-item.active{
	color: var(--accent-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
	content: "\f111";
    font-family: "FontAwesome";
	font-size: 6px;
    color: var(--accent-color);
}

/************************************/
/***     16. Services Page css    ***/
/************************************/

/************************************/
/***   17. Services Single css    ***/
/************************************/

/************************************/
/***     18. Blog Archive css     ***/
/************************************/

/************************************/
/***      19. Blog Single css     ***/
/************************************/

/************************************/
/***     20. Project Page css     ***/
/************************************/

/************************************/
/***    21. Project Single css    ***/
/************************************/

/************************************/
/***      22. Team Page css       ***/
/************************************/

/************************************/
/***      23. Team Single css     ***/
/************************************/

/************************************/
/***     24. Pricing Page css     ***/
/************************************/

/************************************/
/***   25. Testimonial Page css   ***/
/************************************/

/************************************/
/***     26. Image Gallery css    ***/
/************************************/

/************************************/
/***     27. Video Gallery css    ***/
/************************************/

/************************************/
/***      28. FAQs Page css       ***/
/************************************/

/************************************/
/***   29. Contact Us Page css    ***/
/************************************/

/************************************/
/***      30. 404 Page css        ***/
/************************************/

/************************************/
/***      31. Responsive css      ***/
/************************************/

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

	.btn-default span{
		padding: 12px 15px;
	}

	.topbar{
		padding: 15px 0;
	}

	.section-title{
		margin-bottom: 30px;
	}

	.section-title h3{
		margin-bottom: 15px;
	}

	.section-title h1{
		font-size: 54px;
	}

	.section-title h2{
		font-size: 40px;
	}

	.section-title p{
		margin-top: 15px;
	}

	.hero{
		padding: 80px 0 40px;
	}

	.page-header{
		padding: 80px 0;
	}

	.page-header-box h1{
		font-size: 54px;
	}
}

@media only screen and (max-width: 767px){

	.topbar{
        padding: 10px 0;
    }

	.section-title h1{
        font-size: 34px;
    }

	.section-title h2{
        font-size: 28px;
    }

	.page-header-box h1{
        font-size: 34px;
    }
}

/* --- from custom2.css --- */
@font-face {
    font-family: 'TheSansArabic';
    src: url('../fonts/thesans/TheSansArabic-ExtraLight.woff2') format('woff2'),
        url('../fonts/thesans/TheSansArabic-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TheSansArabic';
    src: url('../fonts/thesans/TheSansArabic-Light.woff2') format('woff2'),
        url('../fonts/thesans/TheSansArabic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TheSansArabic';
    src: url('../fonts/thesans/TheSansArabic-Bold.woff2') format('woff2'),
        url('../fonts/thesans/TheSansArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'TheSansArabic';
    src: url('../fonts/thesans/TheSansArabic-Light.woff2') format('woff2'),
        url('../fonts/thesans/TheSansArabic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
} */

body:lang(ar){
    font-family: 'TheSansArabic';
    font-weight: 300;
}

h1:lang(ar), h2:lang(ar), h3:lang(ar), h4:lang(ar), h5:lang(ar), h6:lang(ar){
    font-family: 'TheSansArabic';
}

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

.hero .container {
    position: relative;
    z-index: 2;
}

@media(max-width:767px){
    .topbar{
        background-color: var(--primary);
    }
}

/*
.case-study-image figure, .post-featured-image figure{
    background: #E6E5E5;
    padding: 25px;
}

.case-study-image figure img, .post-featured-image figure img{
	object-fit: contain;
}


.page-header .container{
    position: relative;
    z-index:9999;
}

.page-header .page-title{
    color:#FFFFFF;
}

.page-header .breadcrumb-nav, .page-header .breadcrumb-nav a{
    color: #FFFFFF;
    margin-bottom: 15px;
    font-size: 0.8rem;
} */




/* Search Icon Wrapper */

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

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

/* Search Form */

/* Close Button */
.search-close {
    position: absolute;
    top: -60px;
    right: 0;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.search-close:hover {
    color: var(--primary-color);
    transform: rotate(90deg);
}

/* Animation for search input */
@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    
    .search-close {
        top: -50px;
        font-size: 25px;
    }
}

/* ===== favorite heart visibility fix =====
   The wishlist heart sits in the product card header; the image slider
   (.product-simple-slider with overflow:hidden + Swiper stacking) could
   cover it on listing/category pages. Force it above the slider and make
   the non-active outline clearly visible for guests. */
.product_card .product_card_header--favorite{
    z-index: 5 !important;
}
/* Non-active: white background with outline heart */
.product_card .product_card_header--favorite:not(.active) .svg_container{
    background:#fff !important;
    border:1px solid #eee;
}
.product_card .product_card_header--favorite:not(.active) .svg_container svg .wishlist,
.product_card .product_card_header--favorite:not(.active) .svg_container svg path{
    stroke: var(--primary_color, #f7941d) !important;
    stroke-width: 1.5 !important;
    fill: none !important;
}
/* Active state: filled heart with primary color background */
.product_card .product_card_header--favorite.active .svg_container{
    background: var(--primary_color, #f7941d) !important;
    border: 1px solid var(--primary_color, #f7941d) !important;
}
.product_card .product_card_header--favorite.active .svg_container svg .wishlist,
.product_card .product_card_header--favorite.active .svg_container svg path{
    stroke: #fff !important;
    fill: #fff !important;
}
.product_card .product-simple-slider{
    z-index: 1;
}