/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Inspaire - Architecture and Interior Design HTML Template
* File          : CSS File
* Version       : 1.0
* Persian Language Support Added
* ---------------------------------------------------------------------------------------- */

/* Persian Font Definitions - Yekan Bakh Only */

@font-face {
    font-family: 'Saleh';
    src: url('../webfonts/persian/saleh/Saleh-Extra.ttf') format('truetype');
    font-weight: 300; /* Light = 300 */
    font-style: normal;
    font-display: swap;
}

/* Yekan Bakh Font Family - Standardized Weights */
@font-face {
    font-family: 'Yekan Bakh';
    src: url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 03 Light.ttf') format('truetype');
    font-weight: 300; /* Light = 300 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 04 Regular.woff') format('woff'),
         url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 04 Regular.ttf') format('truetype');
    font-weight: 400; /* Regular = 400 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 05 Medium.woff') format('woff');
    font-weight: 500; /* Medium = 500 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 06 Bold.woff') format('woff'),
         url('../webfonts/persian/yekan_bakh/Yekan Bakh FaNum 06 Bold.ttf') format('truetype');
    font-weight: 700; /* Bold = 700 */
    font-style: normal;
    font-display: swap;
}

/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Why Choose Us css
07. Our Services css
08. Intro Video css
09. Latest Project css
10. How We Work css
11. Our Skills css
12. Our Testimonials css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Image Gallery css
23. FAQs Page css
24. Contact Us Page css
25. 404 Error Page css 
26. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color			: #192324;
	--secondery-color		: #F8F8F8;
	--text-color			: #283132;
	--accent-color			: #7C877F;
	--white-color			: #FFFFFF;
	--divider-color			: #EAF0EC;
	--dark-divider-color	: #FFFFFF1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Yekan Bakh", "Hanken Grotesk", sans-serif;

	/* Brand tint for topbar (nicer blue like the reference) */
	--brand-blue			: #0E3A8A;

	/* Glass UI tokens */
	--glass-bg				: rgba(25, 35, 36, 0.45); /* tinted to primary */
	--glass-bg-solid		: rgba(25, 35, 36, 0.60);
	--glass-border			: rgba(255, 255, 255, 0.14);
	--glass-blur			: 14px;
}


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

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	background-color: var(--white-color);
	color: var(--text-color);
	direction: rtl;
	text-align: right;
	margin: 0; /* remove default UA margins */
}

/* RTL Support */
html[lang="fa"] body {
	direction: rtl;
	text-align: right;
}

html[lang="fa"] .container {
	direction: rtl;
}

/* Fix for buttons and form elements in RTL */
html[lang="fa"] .btn,
html[lang="fa"] .form-control,
html[lang="fa"] .form-select,
html[lang="fa"] input,
html[lang="fa"] textarea {
	text-align: right;
}

/* Navigation RTL fixes */
html[lang="fa"] .navbar-nav {
	direction: rtl;
}

html[lang="fa"] .dropdown-menu {
	right: 0;
	left: auto;
	text-align: right;
}

/* Persian Font Weight Classes - Standardized */
.font-light {
	font-weight: 300; /* All fonts: Light weight */
}

.font-regular {
	font-weight: 400; /* All fonts: Regular weight */
}

.font-medium {
	font-weight: 500; /* All fonts: Medium weight */
}

.font-bold {
	font-weight: 700; /* All fonts: Bold weight */
}

/* Note: Now all fonts have identical weights (300, 400, 500, 700) for fair comparison */

/* Persian Number Support */
.persian-numbers {
	font-feature-settings: "locl";
}

/* Better Persian Typography */
html[lang="fa"] {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
}

html[lang="fa"] * {
	font-family: var(--default-font);
}

/* Headings with Persian font weights */
h1 {
	font-weight: 800; /* ExtraBold for main titles */
}


h4, h5, h6 {
	font-weight: 500; /* Medium for smaller headings */
}

/* Better spacing for Persian text */
html[lang="fa"] p {
	line-height: 1.8;
	letter-spacing: 0.02em;
}

/* Persian button styles */
html[lang="fa"] .btn-default {
	font-weight: 500;
}

/* Yekan Bakh Font Weight Classes */
.font-light {
	font-weight: 300; /* Yekan Bakh Light */
}

.font-regular {
	font-weight: 400; /* Yekan Bakh Regular */
}

.font-medium {
	font-weight: 500; /* Yekan Bakh Medium */
}

.font-bold {
	font-weight: 700; /* Yekan Bakh Bold */
}

/* Persian Text Animation Fix */
html[lang="fa"] .text-anime-style-2 {
	/* Ensure proper word spacing for Persian animations */
	word-spacing: 0.1em;
	white-space: normal;
}

/* Improve Persian word animation visibility */
html[lang="fa"] .text-anime-style-2 .split-word {
	display: inline-block;
	margin-left: 0.2em;
}

/* Persian Section Title h3 Arrow Fix */
html[lang="fa"] .section-title h3 {
	padding-left: 0;
	padding-right: 35px;
}

html[lang="fa"] .section-title h3::before {
	left: auto;
	right: 0;
	background-position: right center;
}

/* Persian Hero Section h3 Arrow Fix */
html[lang="fa"] .hero-content .section-title h3 {
	padding-left: 0;
	padding-right: 35px;
}

html[lang="fa"] .hero-content .section-title h3::before {
	left: auto;
	right: 0;
	background-position: right center;
}

/* -------------------------------------- */
/* RTL Fix: Our Skill images (show all 3) */
/* -------------------------------------- */
html[lang="fa"] .our-skill-image {
	margin-left: 0;
	margin-right: 65px; /* mirror original spacing */
}
html[lang="fa"] .our-skill-img-1 {
	background-position: top right; /* move dot pattern to right */
	padding: 30px 30px 0 0; /* mirror padding */
}
html[lang="fa"] .our-skill-img-2,
html[lang="fa"] .our-skill-img-3 {
	right: auto;
	left: 0; /* anchor to left so they don't collapse off-canvas */
}
/* Fine-tune vertical layering to avoid full overlap */
html[lang="fa"] .our-skill-img-2 { top: 70px; }
html[lang="fa"] .our-skill-img-3 { bottom: 0; }

/* Safety: ensure images not clipped if parent gets overflow hidden somewhere */
html[lang="fa"] .our-skill-image, 
html[lang="fa"] .our-skill-image * { overflow: visible; }

/* -------------------------------------- */
/* RTL Fix: About section image mirroring */
/* -------------------------------------- */
html[lang="fa"] .about-us-images { direction: ltr; padding-right: 0; padding-left: 100px; margin-right: 0; margin-left: 30px; background-position: right 60px bottom 40px; }
/* Big image stays natural (about-img-1) – we just shift small one to left */
html[lang="fa"] .about-us .about-img-2 { right: auto; left: 0; }
/* Circle experience counter top-right of big image */
html[lang="fa"] .about-us .experience-counter { left: auto; right: 0; transform: translate(50%, -6px); }
/* Feedback counter on left side of big image (mirrored) */
html[lang="fa"] .about-us .feedback-counter { right: auto; left: 36px; transform: rotate(-180deg) translate(20px, -20px); writing-mode: vertical-rl; }
html[lang="fa"] .feedback-counter h3, 
html[lang="fa"] .feedback-counter p { text-align: center; }

/* Ensure counters stay readable with Persian numerals inside circle */
html[lang="fa"] .experience-counter h3 { font-variant-numeric: tabular-nums; }

/* Alternative: Persian word-based animation class */
.text-anime-persian {
	opacity: 0;
	animation: fadeInUpWords 1.5s ease-out forwards;
}

@keyframes fadeInUpWords {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

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

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 700;
	line-height: 1.1em;
	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: hidden;
	margin: 0; /* ensure no UA margin sneaks back in */
	padding: 0;
}

.container{
	max-width: 1300px;
}

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

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.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;
    background: var(--accent-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 17px 46px 17px 20px;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    z-index: 0;
}

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

.btn-default::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    background-image: url(../images/left_arrow_white.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: translate(-20px, -50%);
    transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translate(-18px, -50%);
}

.btn-default::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
	right: 0;
    width: 0;
    height: 106%;
    background: var(--primary-color);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default:hover:after{
	width: 100%;
    transform: skew(0deg);
    left: 0;
}

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

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

.btn-default.btn-highlighted::before{
	background-image: url(../images/left_arrow_black.png);
}

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

.btn-default.btn-highlighted::after{
	background-color: var(--accent-color);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 0 auto; /* Removed 40px margin to fix vertical centering in flex preloader */
}

.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%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	/* max-width: 66px; Removed so flex/centering works for wide text like 'Arkam Beton' in Persian */
	transform: translate(-50%, -50%);
	text-align: center;
	width: max-content; /* Ensure the container fits the text exactly for proper centering */
	line-height: 1; /* Minimize vertical offset from line-height */
}

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

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

.section-row{
	margin-bottom: 80px;
}

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

.section-btn{
	text-align: end;
}

.section-title-content{
	margin-left: 120px;
}

.section-title-content p{
	margin: 0;
}

.section-title{
	margin: auto;
	margin-bottom: 14px;
}

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 18px;
    font-weight: 500;
	line-height: 1.6em;
    text-transform: capitalize;
    color: var(--accent-color);
	padding-left: 35px;
    margin-bottom: 20px;
}

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

.section-title h1{
	font-size: 53px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

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


.section-title-content.dark-section p,
.section-title.dark-section p,
.section-title.dark-section h2,
.section-title.dark-section h3{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

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

header.main-header{
	position: absolute; /* sit inside hero on top */
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
	padding: 0;
	background: transparent; /* let hero image show to very top */
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
	margin: 0;
	padding: 0;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    transform: translateY(0);
	background: transparent; /* let the glassy navbar show */
	border-bottom: none;
}

/* First navbar (topbar) layout */
.topbar{ /* visual style declared earlier, add layout */
	position: relative;
	z-index: 110; /* above hero */
	width: 1000px;
	margin: auto;
}
.topbar .topbar-row{
	/* Use flex so edge groups hug sides reliably in RTL */
	display: flex;
	align-items: center;
	justify-content: space-between; /* left and right at edges */
	gap: 16px;
	height: 56px; /* closer to template */
	padding: 0 22px; /* horizontal only; a touch more room at edges */
	position: relative; /* for absolute centered logo */
}
.topbar .topbar-right,
.topbar .topbar-left{
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--white-color);
	font-weight: 500;
}
.topbar .topbar-left{ order: 1; flex: 1 1 0; justify-content: flex-start; padding-left: 6px; min-width: 0; }
.topbar .topbar-center{ order: 2; flex: 0 0 auto; display:flex; justify-content:center; position: absolute; left: 50%; transform: translateX(-50%); }
.topbar .topbar-right{ order: 3; flex: 1 1 0; justify-content: flex-end; padding-right: 6px; min-width: 0; }
.topbar .topbar-center{ display:flex; justify-content:center; }
.topbar .navbar-brand{ margin:0; padding:0; }
.topbar .navbar-brand img{ height: 30px; }
.topbar .fa-phone, .topbar .fa-clock{ opacity: .95; font-size: 16px; transition: transform .25s ease; }
.topbar .phone-number, .topbar .work-time{ font-size: 19px; line-height: 1; }
/* Flip phone handset to face the number (RTL friendly) */
html[lang="fa"] .topbar .fa-phone{ transform: scaleX(-1); }

/* Second navbar spacing and alignment */
.second-nav{
	/* remove visual gap – make the two bars stick together */
	margin-top: 0;
	width: 54%;
	margin: auto;
}
.second-nav .navbar-brand{ display:none; } /* logo handled in topbar on desktop */
.second-nav .main-menu .nav-menu-wrapper{ order: 2; text-align: right; margin-left: 0; }
.second-nav .header-btn{ order: 3; margin-right: auto; margin-left: 0; }
.second-nav .btn-catalog{ white-space: nowrap; }

/* RTL fine-tuning for the two bars */
/* Ensure predictable order in RTL too */
html[lang="fa"] .topbar .topbar-left{ order: 1; }
html[lang="fa"] .topbar .topbar-center{ order: 2; }
html[lang="fa"] .topbar .topbar-right{ order: 3; }
html[lang="fa"] .second-nav .main-menu .nav-menu-wrapper{ text-align: right; }
/* Ensure catalog button sits on the far left in RTL */
html[lang="fa"] .second-nav .header-btn{ margin-right: auto; margin-left: 18px; }

/* Make second nav use the exact same glass style/size as .navbar */
.navbar.second-nav{
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) , var(--glass-bg);
	border-color: var(--glass-border);
	padding: 8px 14px; /* slightly tighter */
	/* visually attach to the topbar */
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: relative; /* anchor mobile dropdown */
}
/* Reduce inner right padding in RTL to match template spacing */
html[lang="fa"] .navbar.second-nav{ padding-right: 8px; }
header.main-header .header-sticky.active .navbar.second-nav{
	background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) , var(--glass-bg-solid);
}

.navbar{
	align-items: center;
	border: 1px solid var(--glass-border);
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) , var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border-radius: 0px 0px 30px 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* Allow mobile dropdown to anchor under the second navbar */
.navbar.second-nav{ position: relative; }

header.main-header .header-sticky.active .navbar{
	border-color: var(--glass-border);
	background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) , var(--glass-bg-solid);
	-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
	backdrop-filter: blur(calc(var(--glass-blur) + 2px));
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

/* Topbar visual: revert to original glass/blur style */
.topbar{
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) , var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	color: var(--white-color);
	border: 1px solid var(--glass-border);
	border-top: 0;
	border-radius: 0 0 30px 30px;
	padding: 0; /* inner row controls the height */
}

/* Header button tweak for glass */
.header-btn .btn-default{
	background: rgba(255,255,255,0.12);
	border: 1px solid var(--glass-border);
	color: var(--white-color);
}
.header-btn .btn-default:hover{
	background: rgba(255,255,255,0.18);
	color: var(--white-color);
}
/* Catalog button: outlined pill style like the template */
.header-btn .btn-catalog{
	background: transparent;
	color: white !important;
	border: 2px solid white!important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	line-height: 1;
}
.header-btn .btn-catalog::before,
.header-btn .btn-catalog::after{ display: none !important; }
.header-btn .btn-catalog:hover{ background: white !important; color: var(---text-color) !important;}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin-left: 14px; /* reduce extra right-side space in RTL */
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
	gap: 8px; /* slightly tighter spacing between items */
}

.main-menu ul li{
	margin: 0 6px; /* tighter */
	position: relative;
}

.main-menu ul li a{
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 500;
	padding: 12px 16px !important; /* a bit smaller like the template */
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
	border-radius: 12px;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus,
.main-menu ul li a.active{
	color: var(--white-color);
	background: transparent;
}

.main-menu ul li a.active {
    position: relative;
}

.main-menu ul li a.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 16px; 
    right: 16px;
    height: 2px;
    background-color: var(--white-color);
    border-radius: 2px;
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 230px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--glass-bg-solid);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 230px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}
.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 6px 20px !important;
	transition: all 0.3s ease-in-out;
	border-radius: 10px;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--white-color);
	background-color: rgba(255,255,255,0.10);
	padding: 6px 20px 6px 23px !important;
}

.responsive-menu,
.navbar-toggle{ display: none; }

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 0;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--glass-bg-solid);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border-bottom: 1px solid var(--glass-border);
}

/* Responsive: keep two-tier header, collapse only the menu list */
@media (max-width: 991.98px){
	/* Bars use full width on mobile but same visual style */
	.topbar{ width: 84%; margin-top: 0;}
	/* Only the homepage elevates the topbar within the hero */
        .home .topbar{ margin-top: 0;}
        .second-nav{ width: 65%;}
        .btn-catalog{font-size: 13px;}
        .hero-content {padding-top: 62px;}
}

@media (max-width: 767.98px){
        /* Bars use full width on mobile but same visual style */
        .topbar{ width: 96%; margin-top: 0;}
        /* Only the homepage elevates the topbar within the hero */
        .home .topbar{ margin-top: 0;}
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	padding: 10px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_menu ul ul li a{
    padding: 10px 20px 10px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
	color: var(--primary-color);
}

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

.hero.parallaxie {
    /* No overrides needed, rely on base class */
}

.hero{
	position: relative;
	background: url('../images/hero-bg-6.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover; /* keep full cover */
	background-color: #192324; /* match hero dark tone so no white flash if image runs short */
    background-attachment: scroll !important; /* Force scroll */
	/* top padding leaves room for header when not sticky */
	padding: 180px 0 250px; /* will be increased by content spacing */
	margin-top: 0; /* no negative shift; header sits inside now */
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
    padding: 280px 0 250px;
	min-height: 100vh;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 50px;
	text-align: left;
	padding-left: calc(((100vw - 1300px) / 2));
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero-content{
	text-align: center;
	margin: auto;
	position: relative;
	z-index: 2;
}

.hero-content .section-title h3,
.hero-content .section-title h1{
	color: var(--white-color);
}

.hero-content .section-title p{
	font-size: 22px;
	color: var(--white-color);
	width: 100%;
	max-width: 600px;
}

.hero-content .section-title h3::before{
	filter: brightness(0) invert(1);
}

.hero-content .btn-default.btn-highlighted{
	margin-right: 30px;
}

/* Improve hero text readability with a subtle glassy backdrop */
.hero .section-title{
	display: inline-block;
	margin: 0 auto;
	padding: 18px 22px;
	-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
	backdrop-filter: blur(calc(4px));
	box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}

.hero .section-title h1,
.hero .section-title h3,
.hero .section-title p{
	text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

@media (max-width: 767.98px){
	.hero .section-title{ padding: 14px 16px; border-radius: 16px; }
	.hero-content .section-title p{ font-size: 18px; }
}

/* Reduce hero empty space on smaller screens */
@media (max-width: 991.98px){
	.hero{ padding: 150px 0 160px; max-height: none; }
	.hero-content .section-title{ height: auto !important; }
}
@media (max-width: 767.98px){
	.hero{ padding: 130px 0 140px; background-position: center top; }
	.hero-content .section-title{ height: auto !important; }
	/* Fade hero bottom smoothly into categories section background */
	.hero::before{
		background: linear-gradient(
			180deg,
			rgba(25,35,36,0.1) 0%,
			rgba(25,35,36,0.55) 50%,
			rgba(25,35,36,0.65) 72%,
			rgba(245,247,246,0.5) 90%,
			#f5f7f6 100%
		);
        height: 100% !important; /* Ensure the gradient overlay doesn't stretch weirdly */
        bottom: 0 !important;
	}
}
@media (max-width: 575.98px){
	.hero{ padding: 110px 0 90px; }
}

/* Hero CTA buttons: glassy pills like catalog button */
.hero-content .hero-btn .btn-default{
	border-radius: 999px !important;
	border: 2px solid var(--glass-border) !important;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	color: var(--white-color) !important;
	padding: 12px 22px !important;
	line-height: 1 !important;
}
.hero-content .hero-btn .btn-default:hover{
	background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), var(--glass-bg-solid) !important;
}
/* Remove arrow animation from generic btn-default inside hero */
.hero-content .hero-btn .btn-default::before,
.hero-content .hero-btn .btn-default::after{ display: none !important; }

/* Highlighted: lighter glass look */
.hero-content .hero-btn .btn-default.btn-highlighted{
	border-color: rgba(255,255,255,0.9) !important;
	background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)), var(--glass-bg) !important;
}
.hero-content .hero-btn .btn-default.btn-highlighted:hover{
	background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10)), var(--glass-bg-solid) !important;
}

/* Make all .btn-default on the home page look like hero buttons */
.home .btn-default{
	border-radius: 999px !important;
	border: 2px solid var(--glass-border) !important;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	color: var(--white-color) !important;
	padding: 12px 22px !important;
	line-height: 1 !important;
}
.home .btn-default:hover{
	background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), var(--glass-bg-solid) !important;
}
.home .btn-default::before,
.home .btn-default::after{ display:none !important; }

/* Highlighted variant on home */
.home .btn-default.btn-highlighted{
	border-color: rgba(255,255,255,0.9) !important;
	background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)), var(--glass-bg) !important;
	color: var(--white-color) !important;
}
.home .btn-default.btn-highlighted:hover{
	background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10)), var(--glass-bg-solid) !important;
}

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

.about-us{
	background-image: url('../images/section-bg-shape-1.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	padding: 46px 0;
}

.about-us-images{
	position: relative;
	background-image: url(../images/about-us-bg-shape.svg);
	background-repeat: no-repeat;
	background-position: left 60px bottom 40px;
	background-size: auto;
	padding-right: 100px;
	padding-bottom: 180px;
	margin-right: 30px;
}

.about-img-1 figure,
.about-img-2 figure{
	display: block;
}

.about-img-1 img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 0.76;
}

.about-img-2{
	position: absolute;
	width: 100%;
	max-width: 385px;
	bottom: 0;
	right: 0;
}

.about-img-2 img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 0.76;
}

.experience-counter{
	position: absolute;
	top: 0;
	left: 0;
	height: 152px;
	width: 152px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border: 6px solid var(--white-color);
	transform: translate(-50%, -6px);
	border-radius: 50%;
}

.experience-counter h3{
	font-size: 34px;
	color: var(--white-color);
	text-align: center;
	width: 100%;
	margin-bottom: 5px;
}

.experience-counter p{
	font-weight: 600;
	line-height: 1.4em;
	text-transform: capitalize;
	color: var(--white-color);
	text-align: center;
	margin-bottom: 0;
}

.feedback-counter{
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(-180deg) translate(20px, -20px);
    writing-mode: vertical-rl;
	display: flex;
	align-items: center;
}

.feedback-counter p{
	font-size: 16px;
	font-weight: 500;
	color: var(--white-color);
	height: 60px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent-color);
	border-radius: 50%;
	margin: 0 0 15px 0;
	transition: all 0.3s ease-in-out;
}

.feedback-counter:hover p{
	background-color: var(--primary-color);
}

.feedback-counter h3{
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	width: calc(100% - 75px);
}

.about-us-content-body{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}

.about-us-content-body::before{
	content: '';
	position: absolute;
	right: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	border: 1px solid var(--divider-color);
	width: 1px;
	height: 100%;
}

.about-us-content-info{
	width: calc(50% - 40px);
}

.about-us-content-list{
	margin-bottom: 40px;
}

.about-us-content-list ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.about-us-content-list ul li{
	position: relative;
	font-weight: 500;
	color: var(--primary-color);
	padding-right: 30px;
	margin-bottom: 15px;
}

.about-us-content-list ul li:last-child{
	margin-bottom: 0;
}

.about-us-content-list ul li::before{
	content: '\f058';
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 2px;
    right: 0;
}

.about-us-contact-list{
	width: calc(50% - 40px);
}

.about-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}

.about-contact-item:last-child{
	margin-bottom: 0;
}

.about-contact-item .icon-box{
	width: 40px;
	height: 40px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.about-contact-item:hover .icon-box{
	background-color: var(--primary-color);
}

.about-contact-item .icon-box figure{
	display: block;
	border-radius: 50%;
	overflow: hidden;
}

.about-contact-item .icon-box img{
	max-width: 40px;
	border-radius: 50%;
}

.about-contact-item .icon-box i{
	font-size: 18px;
	color: var(--white-color);
}

.about-contact-content{
	margin-right: 8px;
	width: calc(100% - 55px);
}

.about-contact-content h3{
	font-size: 20px;
	text-transform: capitalize;
}

.about-contact-content p{
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	margin-bottom: 0;
}

/************************************/
/***     06. Why Choose Us css    ***/
/************************************/

.why-choose-us{
	padding: 100px 0;
	background-color: var(--secondery-color);
}

.why-choose-item{
	display: flex;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.why-choose-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.why-choose-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20px;
	transition: all 0.4s ease-in-out;
}

.why-choose-item:hover .icon-box{
	background-color: transparent;
}

.why-choose-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--primary-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
}

.why-choose-item:hover .icon-box::before{
	transform: scale(1);
}

.why-choose-item .icon-box img{
	max-width: 24px;
	z-index: 1;
	transition: all 0.3s ease-in-out;
}

.why-choose-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-item-content{
	width: calc(100% - 80px);
}

.why-choose-item-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.why-choose-item-content p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.why-choose-images{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-left: 30px;
}

.why-choose-img-box-1,
.why-choose-img-box-2{
	display: flex;
	gap: 20px;
	width: 100%;
}

/* -------------------------------------- */
/* Overlapping Categories Card (Hero edge) */
/* -------------------------------------- */
.categories-card-wrapper{ position: relative; z-index: 5; }
.categories-card{
		position: relative;
		margin: -74px auto 30px; /* pull up: half inside hero, half below */
		display: grid;
		grid-template-columns: 280px 1fr; /* CTA panel + list */
		align-items: stretch;
		gap: 0;
		border-radius: 28px;
		box-shadow: 0 16px 40px rgba(0,0,0,.2);
	padding: 0; /* panels handle their own padding */
	/* Force visual left-to-right panel order even on RTL pages */
	direction: ltr;
}
.glass-card{
		background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) , var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
		border: 1px solid var(--glass-border);
}
.categories-cta{
		display: flex; align-items: center; gap: 10px;
	/* Harmonized with site palette: dark primary with subtle glass tint */
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(25,35,36,0.88);
	color: #fff; border-radius: 28px 0 0 28px; /* left-side rounded corners */
		padding: 22px 26px; font-weight: 700; font-size: 18px;
}
.categories-cta i{ font-size: 18px; }
.categories-cta:hover{ color: #fff; opacity:.95; }

.categories-list{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.categories-list::-webkit-scrollbar{ display: none; }

.cat-item{ display:flex; flex-direction: column; align-items:center; justify-content:center; gap:10px; color: var(--white-color); padding: 10px 8px; text-align:center; min-width: 140px; }
.cat-item:hover{ background: rgba(255,255,255,0.06); border-radius: 16px; }
.cat-thumb{ display:grid; place-items:center; border-radius:50%;}
.cat-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.cat-title{font-size: 16px; }

/* Keep the CTA visually on the left while preserving RTL text */
html[lang="fa"] .categories-card{ direction: ltr; }
html[lang="fa"] .categories-cta{justify-content: center; border-radius: 28px 0 0 28px; }
html[lang="fa"] .categories-list{ direction: rtl; }

/* By default (desktop/tablet), hide the mobile-only two-row categories */
.categories-card .categories-list-rows{ display: none; }

/* Responsive */
@media (max-width: 1199.98px){
	.categories-card{ width: 86%; grid-template-columns: 240px 1fr; }
}
@media (max-width: 991.98px){
	.categories-card{ width: 92%; margin: -56px auto 24px; grid-template-columns: 1fr; }
	.categories-cta{ border-radius: 28px 28px 0 0 !important; justify-content:center; }
}

/* Mobile: show 4-up grid of categories; hide rows/marquee */
@media (max-width: 767.98px){
	/* Use the primary list as a grid */
	.categories-card .categories-list{
		display: grid !important;
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4-up for 500–768px */
		gap: 8px;
		overflow: visible; /* no horizontal scroll in grid mode */
	}
	/* Items must not enforce a fixed width */
	.categories-card .categories-list .cat-item{ min-width: 0; }
	/* Hide the mobile-only rows variant */
	.categories-card .categories-list-rows{ display: none !important; }
}

/* Extra-small phones: <500px — use 3-up grid for better fit */
@media (max-width: 499.98px){
	.categories-card .categories-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------- */
/* Best Sellers (product carousel)        */
/* -------------------------------------- */
.best-sellers{ padding: 60px 0 10px; }

/* Ultra-small phones: <460px — hide the 4th nav item to free space */
@media (max-width: 459.98px){
	.second-nav #menu > li:nth-child(2){ display: none !important; }
}
@media (max-width: 402.98px){
	.second-nav #menu > li:nth-child(5){ display: none !important; }
	.btn-catalog {font-size: 11px;}
}
.best-sellers .best-sellers-head{ display:grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items:center; margin-bottom: 26px; }
.best-sellers .headline{ font-size: 34px; color: var(--primary-color); margin: 0; }
.best-sellers .head-rule{ height: 2px; background: repeating-linear-gradient(90deg, rgba(25,35,36,.25) 0 12px, transparent 12px 24px); opacity:.7; }
.best-sellers .see-more-btn{ display:inline-flex; align-items:center; gap:10px; padding: 10px 24px; border-radius: 999px; border: 2px solid rgba(25,35,36,.2); color: var(--primary-color); font-weight:700; background: #fff; }
.best-sellers .see-more-btn:hover{ background: #f6f8f7; }

.best-seller-slider .swiper{ overflow: hidden; }
.best-seller-slider .swiper-slide{ height: auto; }

/* Best Sellers nav buttons */
.best-seller-slider{ position: relative; }
.best-seller-slider.is-grabbing, .best-seller-slider .swiper.grab-cursor{ cursor: grabbing !important; }
/* Show OS cursor in slider and allow hiding custom circle */
.best-seller-slider, .best-seller-slider *{ cursor: auto !important; }
body.hide-cursor .cb-cursor, body.hide-cursor .cb-cursor-text{ opacity: 0 !important; visibility: hidden !important; }
.best-seller-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; border: 2px solid rgba(25,35,36,.15); background: rgba(255,255,255,.85); backdrop-filter: blur(4px); color: var(--primary-color); box-shadow: 0 6px 20px rgba(0,0,0,.08); transition: all .2s ease; }
.best-seller-nav{ cursor: pointer; }
.best-seller-nav:hover{ background: #fff; border-color: rgba(25,35,36,.25); box-shadow: 0 8px 26px rgba(0,0,0,.12); }
.best-seller-prev{ right: -6px; }
.best-seller-next{ left: -6px; }
@media (max-width: 991.98px){
	.best-seller-prev{ right: 2px; }
	.best-seller-next{ left: 2px; }
}
@media (max-width: 575.98px){
	.best-seller-nav{ width: 38px; height: 38px; }
}

.product-card{ background:#fff; border-radius: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.06); padding: 22px; text-align:center; display:flex; flex-direction: column; gap:0; }
.product-card .prod-thumb{ width:100%; aspect-ratio: 4/3; border-radius: 14px; overflow:hidden; margin-bottom:14px; }
.product-card .prod-thumb img{height:100%; object-fit: cover;}
.product-card .prod-name{ font-size: 20px; color: var(--primary-color); margin: 0; line-height: 1.35; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .prod-size{margin-top: 4px; color: #5b6667; font-size: 20px; line-height: 1.4; opacity: .9; }
.product-card .prod-price{margin-top: 4px; display:inline-flex; align-self:center; padding: 6px 12px; border-radius: 999px; background: #f2f5f4; color: #2a3334; font-weight: 700; font-size: 16px; }
.product-card .prod-price .currency{ opacity:.85; }

/* spacing between slides */
.best-seller-slider .swiper{ padding: 6px 6px 12px; }
/* Let Swiper's spaceBetween control spacing; avoid extra CSS gap that breaks mobile widths */
.best-seller-slider .swiper .swiper-wrapper{ gap: 0; }
.best-seller-slider .swiper .swiper-slide{ width: auto; }

@media (max-width: 1199.98px){
	.best-sellers .headline{ font-size: 30px; }
}
@media (max-width: 991.98px){
	.best-sellers{ padding-top: 20px; }
	.best-sellers .best-sellers-head{ grid-template-columns: 1fr; text-align:center; }
	.best-sellers .head-rule{ display:none; }
}

/* Extra mobile tightening for product cards */
@media (max-width: 767.98px){
	.best-seller-slider .product-card{ padding: 14px; border-radius: 16px; }
	.best-seller-slider .product-card .prod-thumb{ border-radius: 12px; margin-bottom: 10px; }
	.best-seller-slider .product-card .prod-name{ font-size: 16px; }
	.best-seller-slider .product-card .prod-size{ font-size: 16px; }
	.best-seller-slider .product-card .prod-price{ font-size: 12px; padding: 4px 10px; }
}

.why-choose-img-1 figure,
.why-choose-img-2 figure,
.why-choose-img-3 figure,
.why-choose-img-4 figure{
	display: block;
}

.why-choose-img-1{
	width: calc(57% - 10px);
}

.why-choose-img-1 img{
	width: 100%;
	aspect-ratio: 1 / 0.756;
	object-fit: cover;
}

.why-choose-img-2{
	width: calc(43% - 10px);
}

.why-choose-img-2 img{
	width: 100%;
	aspect-ratio: 1 / 1.01;
	object-fit: cover;
}

.why-choose-img-3{
	width: calc(67% - 10px);
}

.why-choose-img-3 img{
	width: 100%;
	aspect-ratio: 1 / 0.746;
	object-fit: cover;
}

.why-choose-img-4{
	width: calc(33% - 10px);
}

.why-choose-img-4 img{
	width: 100%;
	aspect-ratio: 1 / 1.55;
	object-fit: cover;
}

/************************************/
/***     07. Our Services css     ***/
/************************************/

.our-services{
	padding: 28px 0;
}

.service-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.service-image a{
	display: block;
	cursor: none;
}

.service-image a figure::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.service-image img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1.36;
	transition: all 0.4s ease-in-out;
}

.service-item:hover .service-image img{
	transform: scale(1.1);
}

.service-btn{
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 1;
}

.service-btn a{
	background-color: var(--accent-color);
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

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

.service-btn a img{
	max-width: 20px;
	transform: rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

.service-btn a:hover img{
	transform: rotate(0)
}

.service-content{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 1;
}

.service-content h3{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 10px;
}

.service-content h3 a{
	color: inherit;
}

.service-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.all-services-btn{
	text-align: center;
	margin-top: 20px;
}

/************************************/
/***      08. Intro Video css     ***/
/************************************/

.intro-video .container-fluid{
	padding: 0;
}

/* Our Services: mobile-only size tweaks */
@media (max-width: 767.98px){
	.our-services{ padding: 26px 0; }
	.our-services .service-item{ margin-bottom: 18px; }
	.our-services .service-image img{ aspect-ratio: 1 / 0.82; }
	.our-services .service-btn{ top: 12px; right: 12px; }
	.our-services .service-btn a{ width: 42px; height: 42px; }
	.our-services .service-content{ left: 12px; right: 12px; bottom: 12px; }
	.our-services .service-content h3{ font-size: 16px; margin-bottom: 6px; }
	.our-services .service-content p{ font-size: 14px; line-height: 1.5; }
}

.intro-video-box{
	position: relative;
    overflow: hidden;
	z-index: 1;
}

.intro-video-image a{
	display: block;
	cursor: none;
}

.intro-video-image figure::before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.6) 80.94%);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.intro-video-image img{
	width: 100%;
	aspect-ratio: 1 / 0.41;
	object-fit: cover;
}

.video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.video-play-button a{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	margin: 0 auto;	
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button a:hover{
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/************************************/
/***    09. Latest Project css    ***/
/************************************/

.our-project{
	padding: 100px 0 70px;
}

.our-Project-nav{
	text-align: center;
	margin-bottom: 60px;
}

.our-Project-nav ul{
	list-style: none;
	text-align: center;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px 30px;
	padding: 0;
	margin: 0;
}

.our-Project-nav ul li a{
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	font-weight: 500;
	line-height: 1.2em;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.our-Project-nav ul li a:after,
.our-Project-nav ul li a:before{
	content: '';
    position: absolute;
    left: 0px;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform-origin: bottom right;
    transition: transform 0.4s ease-in-out;
    transform: scaleX(0);
}

.our-Project-nav ul li a:after{
	top: -8px;
	bottom: auto;
	left: 0px;
}

.our-Project-nav ul li a:hover:before,
.our-Project-nav ul li a.active-btn:before,
.our-Project-nav ul li a:hover:after,
.our-Project-nav ul li a.active-btn:after{
	transform-origin: bottom left;
    transform: scaleX(1);
}

.project-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.project-featured-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 111.33%);
	z-index: 0;
}

.project-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: none; /* hide center button for project images */
}

/* keep hidden on hover as well */
.project-item:hover .project-btn{ display: none; }

.project-btn a{
	width: 100px;
	height: 100px;
	background: var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.project-btn img{
	max-width: 24px;
	transform: rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

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

.project-btn a:hover img{
	transform: rotate(0deg);
}

.project-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.79;
    object-fit: cover;
}

.project-content{
	position: absolute;
	left: 40px;
	bottom: 40px;
	right: 40px;
}

.project-content h3,
.project-content h2{
	color: var(--white-color);
	text-transform: capitalize;
	position: relative;
	z-index: 1;
}

.project-content h3{
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 10px;
}

.project-content h2{
	font-size: 20px;
	font-weight: 700;
}

.project-content h2 a{
	color: inherit;
}

/************************************/
/***      10. How We Work css     ***/
/************************************/

.how-we-work{
	background: var(--primary-color);
	padding: 100px 0;
}

.how-we-work-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.how-we-work-item{
	width: calc(25% - 22.5px);
}

.how-we-work-item .icon-box{
	margin-bottom: 30px;
}

.how-we-work-item .icon-box img{
	max-width: 60px;
}

.how-we-work-content h3{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 10px;
}

.how-we-work-content p{
	color: var(--white-color);
	margin: 0;
}

.how-work-company-slider{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding-top: 60px;
}

.how-work-company-slider .company-logo{
	text-align: center;
}

.how-work-company-slider .company-logo img{
	width: 50%;
	height: 50%;
	filter: grayscale(86%);
}

/************************************/
/***      11. Our Skills css      ***/
/************************************/

.our-skill{
	padding: 100px 0;
	background: url('../images/section-bg-shape-2.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.skills-progress-bar{
	margin-bottom: 40px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0;
}

.skillbar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.skill-data .skill-title{
	font-size: 16px;
	text-transform: capitalize;
	color: var(--primary-color);
}

.skill-data .skill-no{
	font-size: 16px;
	color: var(--primary-color);
	margin-left: 20px;
}

.skill-progress{
	width: 100%;
	height: 12px;
	background: var(--divider-color);
	border-radius: 99px;
	position: relative;
}

.skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--primary-color);
	border-radius: 99px;
}

.our-skill-image{
	position: relative;
	padding-bottom: 155px;
	margin-left: 65px;
}

.our-skill-img-1{
	width: 333px;
	position: relative;
	background: url('../images/our-skill-img-bg-dot.svg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 84px auto;
	padding: 30px 0 0 30px;
}

.our-skill-img-1 figure,
.our-skill-img-2 figure,
.our-skill-img-3 figure{
	display: block;
}

.our-skill-img-1 img{
	width: 100%;
	aspect-ratio: 1/1.37;
	object-fit: cover;
}

.our-skill-img-2{
	width: 202px;
	position: absolute;
	top: 70px;
	right: 0;
}

.our-skill-img-2 img{
	width: 100%;
	aspect-ratio: 1/0.93;
	object-fit: cover;
}

.our-skill-img-3{
	width: 333px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.our-skill-img-3 img{
	width: 100%;
	aspect-ratio: 1/0.97;
	object-fit: cover;
}

/************************************/
/***   12. Our Testimonials css   ***/
/************************************/

.our-testimonials{
	background: var(--secondery-color);
}

.our-testimonials .container-fluid{
	padding: 0;
}

.our-testimonials-image{
	height: 100%;
}

.our-testimonials-image figure,
.our-testimonials-image figure img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.82;
    object-fit: cover;
}

.our-testimonial-content{
	padding: 100px;
}

.our-testimonial-content .section-title{
	background: url('../images/testimonial-quote.svg') no-repeat;
	background-position: top right;
	background-size: 162px auto;
}

.testimonial-slider{
	width: 100%;
	max-width: 620px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--divider-color);
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-rating{
	margin-bottom: 20px;
}

.testimonial-rating i{
	font-size: 18px;
	color: var(--primary-color);
	margin-right: 2px;
}

.testimonial-rating i:last-child{
	margin-right: 0;
}

.testimonial-content{
	margin-bottom: 40px;
}

.testimonial-content p{
	font-size: 20px;
	color: var(--primary-color);
	margin: 0;
}

.testimonial-body{
	display: flex;
	align-items: center;
}

.testimonial-body .author-image{
	margin-left: 15px;
}

.testimonial-body .author-image img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.testimonial-body .author-content{
	width: calc(100% - 75px);
}

.testimonial-body .author-content h3{
	font-size: 20px;
	text-transform: capitalize;
}

.testimonial-body .author-content p{
	text-transform: capitalize;
	margin: 0;
}

.testimonial-rating-counter{
	display: flex;
	align-items: center;
	gap: 20px;
}

.testimonial-rating-counter .rating-counter h2{
	font-size: 58px;
}

.testimonial-client-rating{
	display: inline-block;
	background: var(--accent-color);
    padding: 0px 5px 3px 5px;
    line-height: 1em;
}

.testimonial-client-rating i{
	font-size: 10px;
	color: var(--white-color);
}

.testimonial-rating-content p{
	color: var(--primary-color);
	font-weight: 500;
	margin: 0;
}

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

.our-blog{
	padding: 100px 0;
	background: url('../images/section-bg-shape-2.svg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}

.post-item{
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image{
    margin-bottom: 20px;
}

.post-featured-image a{
    cursor: none;
}

.post-featured-image figure,
.post-featured-image a{
    display: block;
}

.post-featured-image img{
    width: 100%;
    aspect-ratio: 1 / 0.85;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.post-item:hover .post-featured-image img{
    transform: scale(1.1);
}

.post-item-content{
	margin-bottom: 15px;
}

.post-item-content h3{
	color: var(--primary-color);
    font-size: 20px;
	line-height: 1.4em;
}

.post-item-content h3 a{
    color: inherit;
}

.post-item-btn a{
	position: relative;
	color: var(--primary-color);
	font-weight: 500;
	text-transform: capitalize;
	padding-right: 25px;
}

.post-item-btn a::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0px , -50%);
	width: 17px;
	height: 16px;
	background: url('../images/arrow-dark.svg') no-repeat;
	background-position: right center;
	background-size: cover;
	transition: all 0.4s ease-in-out;
}

.post-item-btn a:hover::after{
	transform: translate(2px , -50%);
}

.our-blog-footer{
	margin-top: 20px;
	text-align: center;
}

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

.main-footer{
	padding: 120px 0 0;
	background: var(--primary-color);
}

.main-footer .footer-header{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.footer-social-links{
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 30px;
}

.footer-social-link-title h3{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
}

.footer-social-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-social-links ul li{
	display: inline-flex;
	margin-right: 10px;
}

.footer-social-links ul li:last-child{
	margin-right: 0;
}

.footer-social-links ul li a{
	display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white-color);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a i{
	font-size: 18px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover{
	background: var(--accent-color);
}

.footer-social-links ul li a:hover i{
	color: var(--white-color);
}

.footer-links h3{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links ul li{
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
	margin-bottom: 10px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li:hover{
	color: var(--accent-color);
}

.footer-links ul li a{
	display: block;
	color: inherit;
}

.footer-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.footer-contact-item:last-child{
	margin-bottom: 0;
}

.footer-contact-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin-left: 10px;
	transition: all 0.3s ease-in-out;
}

.footer-contact-item:hover .icon-box{
	border-color: var(--white-color);
}

.footer-contact-item .icon-box i{
	font-size: 16px;
	color: var(--white-color);
}

.footer-contact-content{
	width: calc(100% - 50px);
}

.footer-contact-content p{
	color: var(--white-color);
	margin: 0;
}

.footer-newsletter-form p{
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-newsletter-form .form-group{
	display: flex;
	background: var(--white-color);
	overflow: hidden;
}

.footer-newsletter-form .form-group .form-control{
	width: 85%;
	border: none;
	border-radius: 0;
	color: var(--text-color);
	background: transparent;
	padding: 13px 10px;
	box-shadow: none;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--text-color);
}

.footer-newsletter-form button{
	background-color: transparent;
	width: 15%;
	border: none;
	padding: 0;
}

.footer-newsletter-form button i{
	color: var(--accent-color);
	font-size: 16px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form button:hover i{
	color: var(--primary-color);
}

/* Footer specific tweaks */
.main-footer .footer-logo .logo_top{ color: var(--white-color); }
/* Prevent blue links in footer globally */
.main-footer a { color: inherit !important; text-decoration: none; }
.main-footer a:hover { color: var(--primary-color) !important; }
/* Specific overrides if needed */
.main-footer a.footer-link-blue{ color: inherit !important; }
.main-footer a.footer-link-blue:hover{ color: var(--primary-color) !important; }

.footer-copyright{
	border-top: 1px solid var(--dark-divider-color);
	text-align: center;
	margin-top: 65px;
	padding: 40px 0;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin: 0;
}

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

.page-header{
	position: relative;
	background: url('../images/hero-bg-6.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 198px 0 141px;
	margin-top: -118px;
}

.page-header::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	text-align: center;
	z-index: 1;
	backdrop-filter: blur(calc(4px));
	width: 60%;
    padding-top: 106px;
    padding-bottom: 68px;
    margin: auto;
}

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
    font-weight: 700;
	color: var(--white-color);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    cursor: none;
}

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

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

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

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    font-size: 20px;
    color: var(--white-color);
	float: right;
	padding-left: 9px;
}

.about-us.page-about-us{
	background: transparent;
}

.about-facility-list{
	margin-top: 100px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-facility-item{
	width: calc(33.33% - 20px);
	display: flex;
}

.about-facility-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
}

.about-facility-item .icon-box:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-facility-item:hover .icon-box:before{
	transform: scale(1);
}

.about-facility-item .icon-box img{
	max-width: 24px;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.about-facility-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-facility-content{
	width: calc(100% - 80px);
}

.about-facility-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.about-facility-content p{
	margin-bottom: 0;
}

.vision-mission{
	padding: 100px 0 50px;
	background: linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);
}

.vision-mission-box{
	background-color: var(--secondery-color);
	padding: 45px 60px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 150px;
}

.vision-mission-item{
	position: relative;
	width: calc(50% - 75px);
}

.vision-mission-item::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	top: 0;
	right: -75px;
	bottom: 0;
	background-color: var(--divider-color);
	z-index: 1;
}

.vision-mission-item:nth-child(2n + 2)::before,
.vision-mission-item:last-child::before{
	display: none;
}

.vision-mission-item .icon-box{
	position: relative;
	width: 95px;
	height: 95px;
	background: var(--divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.vision-mission-item .icon-box:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.vision-mission-item:hover .icon-box:before{
	transform: scale(1);
}

.vision-mission-item .icon-box img{
	position: relative;
	max-width: 36px;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.vision-mission-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.vision-mission-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.vision-mission-content p{
	margin: 0;
}

.best-selling{
	background: url(../images/section-bg-shape-1.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
	padding: 50px 0 100px;
}

.best-selling-content-img{
	margin-bottom: 80px;
}

.best-selling-iamge figure,
.best-selling-content-img figure{
	display: block;
}

.best-selling-content-img img{
	width: 100%;
	aspect-ratio: 1 / 0.42;
    object-fit: cover;
}

.best-selling-content .section-title{
	margin-bottom: 0;
}

.best-selling-iamge img{
	width: 100%;
	aspect-ratio: 1 / 0.93;
    object-fit: cover;
}

.our-team{
	padding: 100px 0 70px;
}

.team-member-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.team-image{
	position: relative;
	margin-bottom: 20px;
    overflow: hidden;
}

.team-image a{
	display: block;
	cursor: none;
}

.team-image figure{
	display: block;
}

.team-image figure img{
	width: 100%;
    aspect-ratio: 1 / 1.11;
    object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.team-member-item:hover .team-image figure img{
	transform: scale(1.1);
}

.team-readmore-btn{
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 1;
}

.team-readmore-btn a{
	width: 60px;
	height: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.team-readmore-btn a:hover{
	background-color: var(--primary-color);
}

.team-readmore-btn img{
	max-width: 20px;
	transform: rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

.team-readmore-btn a:hover img{
	transform: rotate(0deg);
}

.team-content{
	text-align: center;
	margin-bottom: 20px;
}

.team-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.team-content p{
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.team-social-icon ul li{
	display: inline-flex;
	margin-right: 10px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
	width: 44px;
	height: 44px;
	color: var(--accent-color);
	background: var(--divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover{
	color: var(--white-color);
	background: var(--primary-color);
}

.team-social-icon ul li a i{
	color: inherit;
	font-size: 18px;
}

.our-faqs{
	padding: 100px 0;
}

.our-faqs-content{
	margin-right: 70px;
}

.faq-accordion .accordion-item{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
	padding-bottom: 0;
    border-bottom: none;
}

.faq-accordion .accordion-header .accordion-button{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--primary-color);
	align-items: start;
    padding-right: 35px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button span{
	margin-right: 7px;
}

.faq-accordion .accordion-button:not(.collapsed){
    padding-bottom: 15px;
}

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	font-size: 18px;
	font-weight: 900;
	color: var(--primary-color);
	text-align: right;
    top: 0;
    right: 0;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
}

.faq-accordion .accordion-body{
	padding-right: 35px;
}

.faq-accordion .accordion-body p{
	margin: 0;
}

.our-faqs-image{
	text-align: right;
}

.our-faqs-image figure{
	display: block;
}

.our-faqs-image img{
	width: 100%;
	aspect-ratio: 1 / 1.26;
    object-fit: cover;
}

.our-clients{
	background-color: var(--secondery-color);
	padding: 100px 0;
}

.our-clients .our-clients-box{
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.our-client-slider .client-logo{
	text-align: center;
}

.our-client-slider .client-logo img{
	width: 100%;
	max-height: 40px;
}

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

.page-services{
	padding: 100px 0 70px;
}

/************************************/
/***    17. Service Single css 	  ***/
/************************************/

.page-service-single{
    padding: 100px 0;
}

.service-sidebar{
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.service-catagery-list{
	border: 1px solid var(--divider-color);
	padding: 30px;
    margin-bottom: 40px;
	overflow: hidden;
}

.service-catagery-list h3{
    font-size: 20px;
    text-transform: capitalize;
    border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.service-catagery-list ul{
    list-style: none;
    margin: 0;
	padding: 0;
}

.service-catagery-list ul li{
    margin-bottom: 20px;
}

.service-catagery-list ul li:last-child{
    margin: 0;
}

.service-catagery-list ul li a{
    position: relative;
    display: block;
	font-weight: 500;
    text-transform: capitalize;
    color: var(--accent-color);
	padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a{
    color: var(--primary-color);
}

.service-catagery-list ul li a::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
	transform: translateY(-50%) rotate(-45deg);
    background-image: url(../images/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a::before{
	transform: translateY(-50%) rotate(0);
    filter: brightness(0) invert(0);
}

.sidebar-cta-image figure{
	display: block;
}

.sidebar-cta-image img{
	width: 100%;
	aspect-ratio: 1 / 0.57;
	object-fit: cover;
}

.sidebar-cta-Body{
	border: 1px solid var(--divider-color);
	padding: 30px;
}

.sidebar-cta-content{
	margin-bottom: 25px;
}

.sidebar-cta-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.sidebar-cta-content p{
	font-weight: 500;
	margin-bottom: 0;
}

.sidebar-cta-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.sidebar-cta-contact-item:last-child{
	margin-bottom: 0;
}

.sidebar-cta-contact-item .icon-box{
	position: relative;
	height: 58px;
	width: 58px;
	background-color: var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact-item:hover{
	background-color: transparent;
}

.sidebar-cta-contact-item .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

.sidebar-cta-contact-item:hover .icon-box::before{
    transform: scale(1);
}

.sidebar-cta-contact-item .icon-box img{
	position: relative;
	max-width: 24px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.sidebar-cta-contact-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.cta-contact-item-content{
	width: calc(100% - 78px);
}

.cta-contact-item-content p{
	font-weight: 500;
	margin: 0;
}

.service-feature-image{
    margin-bottom: 40px;
}

.service-feature-image figure{
    display: block;
}

.service-feature-image img{
    width: 100%;
    aspect-ratio: 1 / 0.55;
    object-fit: cover;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry h2{
	font-size: 46px;
	margin-bottom: 20px;
}

.service-entry h2 span{
	color: var(--accent-color);
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry p:last-child{
    margin-bottom: 0;
}

.service-entry ul{
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.service-entry ul li{
	position: relative;
    font-weight: 500;
    color: var(--text-color);
	text-transform: capitalize;
    padding-left: 30px;
    margin-bottom: 15px;
}

.service-entry ul li:last-child{
	margin-bottom: 0;
}

.service-entry ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 2px;
    left: 0;
}

.service-entry-list-image{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.service-entry-image,
.service-entry-list{
	width: calc(50% - 15px);
}

.service-entry-image figure{
	display: block;
}

.service-entry-image img{
	width: 100%;
	aspect-ratio: 1 / 0.615;
	object-fit: cover;
}

.service-entry-list ul{
	margin-bottom: 0;
}

.why-choose-content.service-single-why-choose{
	margin-bottom: 60px;
}

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

.page-blog{
	padding: 100px 0;
}

.page-pagination{
    margin-top: 20px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--primary-color);
    color: var(--white-color);
}

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

.page-single-post{
	padding: 100px 0;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;
}

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 700;
	line-height: 1.2em;
	margin: 0 0 0.6em;
}

.post-entry h1{
	font-size: 80px;
    letter-spacing: -0.02em;
}

.post-entry h2{
	font-size: 46px;
    letter-spacing: -0.02em;
}

.post-entry h3{
	font-size: 46px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 18px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: url(../images/icon-blockquote.svg), var(--accent-color);
	background-repeat: no-repeat;
	background-position: 35px 30px;
    background-size: 58px;
    border-radius: 0;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--accent-color);
    color: var(--white-color);
	border-radius: 0;
    padding: 6px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 0;
    width: 36px;
    height: 36px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--primary-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

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

.page-project{
	padding: 100px 0 70px;
}

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

.page-project-single{
	padding: 100px 0;
}

.project-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 30px;
}

.project-detail-list{
	border: 1px solid var(--divider-color);
	padding: 30px;
	margin-bottom: 60px;
}

.project-detail-item{
	display: flex;
	align-items: center;
    margin-bottom: 30px;
}

.project-detail-item:last-child{
	margin-bottom: 0;
}

.project-detail-item .icon-box{
	position: relative;
	background-color: var(--divider-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.project-detail-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--accent-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

.project-detail-item:hover .icon-box::before{
	transform: scale(1);
}

.project-detail-item .icon-box i{
	font-size: 22px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.project-detail-item:hover .icon-box i{
	color: var(--white-color);
}

.project-detail-content{
	width: calc(100% - 70px);
}

.project-detail-content h3{
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-detail-content p{
	color: var(--accent-color);
	text-transform: capitalize;
	margin-bottom: 0;
}

.project-single-image{
    margin-bottom: 40px;
}

.project-single-image figure{
    display: block;
}

.project-single-image img{
	width: 100%;
    aspect-ratio: 1 / 0.6;
    object-fit: cover;
}

.project-info,
.project-design-info{
	margin-bottom: 60px;
}

.project-entry h2{
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

.project-entry p{
	margin-bottom: 20px;
}

.project-entry p:last-child{
	margin-bottom: 0;
}

.project-entry ul{
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.project-entry ul li{
	position: relative;
    font-weight: 500;
    color: var(--text-color);
    padding-left: 30px;
    margin-bottom: 15px;
}

.project-entry ul li:last-child{
	margin-bottom: 0;
}

.project-entry ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 2px;
    left: 0;
}

.project-gallery-images{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.project-gallery-img{
    width: calc(25% - 22.5px);
}

.project-gallery-img a,
.project-gallery-img figure{
    display: block;
	cursor: none;
}

.project-gallery-img figure img{
    width: 100%;
    aspect-ratio: 1 / 0.99;
    object-fit: cover;
}

/************************************/
/***    22. Image Gallery css 	  ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.85;
	object-fit: cover;
}

/************************************/
/***    	23. FAQs Page css 	  ***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.faq-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 30px;
}

.faq-catagery-list{
	border: 1px solid var(--divider-color);
	padding: 30px;
	margin-bottom: 60px;
}

.faq-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-catagery-list ul li{
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:last-child{
	margin-bottom: 0;
}

.faq-catagery-list ul li a{
	position: relative;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a{
	color: var(--primary-color);
}

.faq-catagery-list ul li a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%) rotate(-45deg);
    background-image: url(../images/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a::before{
	transform: translateY(-50%) rotate(0);
    filter: brightness(0) invert(0);
}

.our-faq-section.page-faq-accordion{
    margin-bottom: 60px;
}

.our-faq-section.page-faq-accordion:last-child{
    margin-bottom: 0;
}

/************************************/
/***   24. Contact Us Page css 	  ***/
/************************************/

.page-contact-us{
	padding: 100px 0 50px;
}

.contact-us-image{
	height: 100%;
}

.contact-us-image figure{
	height: 100%;
	display: block;
}

.contact-us-image img{
	height: 100%;
	width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 0.962;
}

.contact-us-form{
	margin-left: 30px;
}

.contact-form .form-control{
    font-size: 16px;
    font-weight: 500;
	line-height: 1.2em;
    background-color: var(--white-color);
    color: var(--text-color);
    border: 1px solid var(--divider-color);
	border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 14px 15px;
}

.contact-form .form-control::placeholder{
	font-weight: 400;
}

.google-map{
	padding: 50px 0 100px;
}

.google-map .section-title{
	width: 100%;
	max-width: 560px;
	margin: 0 auto 30px;
	text-align: center;
}

.google-map-iframe,
.google-map-iframe iframe{
	width: 100%;
	height: 500px;
}

.contact-info-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 60px;
}

.contact-info-item{
	width: calc(33.33% - 20px);
	display: flex;
}

.contact-info-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--divider-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20px;
}

.contact-info-item .icon-box:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.contact-info-item:hover .icon-box:before{
	transform: scale(1);
}

.contact-info-item .icon-box i{
	position: relative;
	font-size: 20px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.contact-info-item:hover .icon-box i{
	color: var(--white-color);
}

.contact-info-content{
	width: calc(100% - 80px);
}

.contact-info-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.contact-info-content p{
	margin-bottom: 0;
}

/************************************/
/***    25. 404 Error Page css 	  ***/
/************************************/

.error-page{
	background-image: url(../images/error-page-bg.svg);
	background-repeat: no-repeat;
	background-position: top -100px center;
	background-size: auto;
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 50%;
}

 .error-page-content{
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 20px;
}

.error-page-content-body p{
	font-weight: 500;
	margin-bottom: 20px;
}

/************************************/
/***      26. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1366px){
	
	.our-testimonial-content{
		padding: 100px 50px;
	}
}

@media only screen and (max-width: 1024px){
	
	.main-menu ul li{
		margin: 0;
	}

	.our-testimonial-content{
		padding: 50px 20px;
	}
}

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

	.navbar{
		padding: 20px 0;
	}
	
	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.btn-default{
		padding: 14px 42px 14px 16px;
	}

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

	.section-row .section-title{
		margin-bottom: 0;
		margin-right: 0px;
	}

	.section-title-content{
		margin-left: 0;
		margin-top: 15px;
	}

	.section-btn{
		text-align: left;
		margin-top: 15px;
	}

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

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

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

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

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

	.hero{
		min-height: auto;
		padding: 180px 0 140px;
		margin-top: -92px;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 180px 0 140px;
		min-height: auto;
	}

	.hero.hero-slider-layout .hero-pagination{
		padding-left: 15px;
		bottom: 30px;
	}

	.hero-content .section-title p{
		font-size: 20px;
	}

	.about-us{
		padding: 50px 0;
	}

	.about-us-images{
		margin: 0 0 30px 0;
	}

	.experience-counter{
		height: 137px;
		width: 137px;
	}

	.experience-counter h3{
		font-size: 28px;
	}

	.about-us-content-list{
		margin-bottom: 30px;
	}

	.about-contact-item{
		margin-bottom: 30px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-content{
		margin-bottom: 30px;
	}

	.why-choose-item .icon-box{
		margin-right: 10px;
	}

	.why-choose-item-content{
		width: calc(100% - 70px);
	}

	.why-choose-images{
		margin-left: 0;
	}

	.our-services{
		padding: 50px 0;
	}

	.service-image img{
		aspect-ratio: 1 / 1.2;
	}

	.service-btn{
		top: 20px;
		right: 20px;
	}

	.service-btn a{
		height: 50px;
		width: 50px;
	}

	.service-content{
		bottom: 20px;
		left: 20px;
		right: 20px;
	}

	.all-services-btn{
		margin-top: 10px;
	}

	.video-play-button a{
		width: 80px;
		height: 80px;
	}

	.our-project{
		padding: 50px 0 20px;
	}

	.our-Project-nav{
		margin-bottom: 50px;
	}

	.project-featured-image img{
		aspect-ratio: 1 / 0.89;
	}

	.project-btn a{
		width: 80px;
		height: 80px;
	}

	.project-content{
		left: 20px;
		bottom: 20px;
		right: 20px;
	}

	.how-we-work{
		padding: 50px 0;
	}

	.how-we-work-item{
		width: calc(50% - 15px);
	}

	.how-we-work-item .icon-box{
		margin-bottom: 20px;
	}

	.how-work-company-slider{
		margin-top: 40px;
		padding-top: 40px;
	}

	.our-skill{
		padding: 50px 0;
	}

	.our-skill-content{
		margin-bottom: 30px;
	}

	.skills-progress-bar{
		margin-bottom: 30px;
	}

	.our-skill-image{
		max-width: 555px;
		margin: 0 auto;
	}

	.our-testimonials-image{
		height: auto;
	}

	.our-testimonials-image figure,
	.our-testimonials-image figure img{
		height: auto;
		aspect-ratio: 1 / 0.65;
	}

	.our-testimonial-content{
		padding: 50px 15px;
	}

	.our-testimonial-content .section-title{
		background-size: contain;
	}

	.testimonial-slider{
		max-width: 100%;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.testimonial-rating{
		margin-bottom:15px;
	}

	.testimonial-content{
		margin-bottom: 30px;
	}

	.testimonial-content p{
		font-size: 18px;
	}

	.testimonial-rating-counter .rating-counter h2{
		font-size: 48px;
	}

	.our-blog{
		padding: 50px 0;
	}

	.our-blog .section-title{
		margin-right: 0;
	}

	.post-featured-image img{
		aspect-ratio: 1 / 0.75;
	}

	.our-blog-footer{
		margin-top: 10px;
	}

	.main-footer{
		padding: 40px 0 0;
	}

	.main-footer .footer-header{
		margin-bottom: 30px;
		padding-bottom: 30px;
		margin-top: 46px;
	}

	.footer-links{
		padding-right: 0;
		margin-bottom: 30px;
	}

	.footer-newsletter-form p{
		margin-bottom: 20px;
	}

	.footer-copyright{
		margin-top: 0px;
		padding: 20px 0;
	}

	.page-header{
        padding: 180px 0 100px;
        margin-top: -92px;
    }

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

	.page-header-box ol li.breadcrumb-item{
		font-size: 18px;
	}

	.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
		font-size: 16px;
	}

	.about-facility-list{
		margin-top: 50px;
		gap: 20px;
	}

	.about-facility-item{
		width: calc(33.33% - 13.33px);
	}

	.about-facility-item .icon-box{
		height: 45px;
		width: 45px;
		margin-right: 10px;
	}

	.about-facility-item .icon-box img{
		max-width: 20px;
	}

	.about-facility-content{
		width: calc(100% - 55px);
	}

	.about-facility-content h3{
		font-size: 18px;
	}

	.vision-mission{
		padding: 50px 0 25px;
	}

	.vision-mission-box{
        padding: 30px 15px;
        gap: 30px 40px;
    }

	.vision-mission-item{
		width: calc(50% - 20px);
	}

	.vision-mission-item::before{
		right: -20px;
	}

	.vision-mission-item .icon-box{
		width: 70px;
		height: 70px;
	}

	.vision-mission-item .icon-box img{
		max-width: 30px;
	}

	.vision-mission-content h3{
		margin-bottom: 15px;
	}

	.best-selling{
		padding: 25px 0 50px;
	}

	.best-selling-content{
		margin-bottom: 20px;
	}

	.best-selling-content-img{
		margin-bottom: 20px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-readmore-btn{
		top: 20px;
		right: 20px;
	}

	.team-readmore-btn a{
		width: 50px;
		height: 50px;
	}

	.team-content{
		margin-bottom: 15px;
	}

	.our-faqs{
		padding: 50px 0;
	}

	.our-faqs-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.our-faqs-image{
		text-align: center;
		margin-left: 0px;
	}

	.our-faqs-image img{
		aspect-ratio: 1 / 0.8;
	}

	.our-clients{
		padding: 50px 0;
	}

	.our-clients .our-clients-box{
		max-width: 100%;
	}

	.page-services{
		padding: 50px 0 20px;
	}

	.page-service-single{
		padding: 50px 0;
	}

	.service-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.service-catagery-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.service-catagery-list h3{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.service-catagery-list ul li{
		margin-bottom: 10px;
	}

	.service-catagery-list ul li a::before{
		width: 16px;
		height: 16px;
	}

	.sidebar-cta-Body{
		padding: 20px;
	}

	.sidebar-cta-content{
		margin-bottom: 15px;
	}

	.sidebar-cta-contact-item{
		margin-bottom: 15px;
	}

	.service-feature-image{
		margin-bottom: 30px;
	}

	.service-entry{
		margin-bottom: 30px;
	}

	.service-entry ul li{
		font-size: 14px;
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.service-entry ul li::before{
		font-size: 18px;
	}

	.why-choose-content.service-single-why-choose{
		margin-bottom: 30px;
	}

	.page-blog{
		padding: 50px 0;
	}

	.page-pagination{
        margin-top: 10px;
    }

	.page-single-post{
		padding: 50px 0;
	}

	.post-image{
		margin-bottom: 20px;
	}

	.post-entry blockquote{
		background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

	.post-entry h2{
		font-size: 38px;
	}

	.post-entry ul li{
		font-size: 16px;
	}

	.post-tags{
		margin-bottom: 20px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.post-tags .tag-links a{
		padding: 6px 15px;
	}

	.page-project{
		padding: 50px 0 20px;
	}

	.page-project-single{
		padding: 50px 0;
	}

	.project-single-sidebar{
		position: initial;
		margin-right: 0px;
		margin-bottom: 30px
	}

	.project-detail-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.project-single-image{
		margin-bottom: 30px;
	}

	.project-info,
	.project-design-info{
		margin-bottom: 30px;
	}

	.project-entry h2{
		font-size: 36px;
		margin-bottom: 20px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-gallery-box .photo-gallery img{
		aspect-ratio: 1 / 0.85;
	}

	.page-faqs{
		padding: 50px 0;
	}

	.faq-sidebar{
		position: initial;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.faq-catagery-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.faq-catagery-list ul li{
        margin-bottom: 15px;
    }

	.faq-catagery-list ul li a::before{
        width: 16px;
        height: 16px;
    }

	.our-faq-section.page-faq-accordion{
		margin-bottom: 40px;
	}

	.page-contact-us{
		padding: 50px 0 25px;
	}

	.contact-us-image{
		height: auto;
		margin-bottom: 30px;
	}

	.contact-us-image img{
		aspect-ratio: 1 / 0.6;
	}

	.contact-us-form{
		margin-left: 0;
	}

	.contact-form .form-control{
		padding: 12px 15px;
	}

	.google-map{
		padding: 25px 0 50px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 400px;
	}

	.contact-info-box{
		gap: 20px;
		margin-top: 40px;
	}

	.contact-info-item{
		width: calc(33.33% - 13.33px);
	}

	.contact-info-item .icon-box{
		height: 50px;
		width: 50px;
		margin-right: 10px;
	}

	.contact-info-item .icon-box i{
		font-size: 16px;
	}

	.contact-info-content{
		width: calc(100% - 60px);
	}

	.contact-info-content h3{
		font-size: 18px;
	}

	.error-page{
		padding: 50px 0;
	}

	.error-page-image img{
		max-width: 80%;
	}
}

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

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

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

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

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

	.hero-content .section-title p{
		font-size: 18px;
	}

	.hero-content .btn-default{
		margin-right: 40px;
		margin-bottom: 10px;
	}

	.hero-content .btn-default.btn-highlighted{
		margin: 0;
	}

	.about-us-images{
		background-position: left 10px bottom 10px;
		background-size: 20% auto;
		padding: 10px 45px 100px 0;
	}

	.feedback-counter{
		transform: rotate(-180deg) translate(0, 0);
	}

	.feedback-counter p{
        font-size: 12px;
        height: 38px;
        width: 38px;
        margin: 0 0 6px 0;
    }

	.feedback-counter h3{
		font-size: 12px;
        width: calc(100% - 40px);
	}

	.about-img-2{
		max-width: 240px;
	}

	.experience-counter{
        height: 102px;
        width: 102px;
    }

	.experience-counter h3{
        font-size: 22px;
    }

	.experience-counter p{
		font-size: 12px;
		line-height: 1.1em;
	}

	.about-us-content-body{
		gap: 0px;
	}

	.about-us-content-body::before{
		display: none;
	}

	.about-us-content-info{
		width: 100%;
		border-bottom: 1px solid var(--divider-color);
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.about-us-content-list{
        margin-bottom: 20px;
    }

	.about-us-contact-list{
		width: 100%;
	}

	.about-us-content-list ul li{
		margin-bottom: 10px;
	}

	.about-us-content-list ul li::before{
		font-size: 18px;
		top: 3px;
	}

	.about-contact-item{
		margin-bottom: 20px;
	}

	.about-contact-content h3{
		font-size: 18px;
	}

	.why-choose-item-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.why-choose-img-2 img{
		aspect-ratio: 1 / 1.02;
	}

	.why-choose-img-4 img{
		aspect-ratio: 1 / 1.588;
	}

	.service-content h3{
		font-size: 18px;
	}

	.intro-video-image img{
		aspect-ratio: 1 / 0.7;
	}

	.project-btn a{
        width: 60px;
        height: 60px;
    }

	.project-btn img{
		max-width: 20px;
	}

	.project-content h2{
		font-size: 18px;
	}

	.how-we-work-item{
		width: 100%;
	}

	.how-we-work-item .icon-box img{
		max-width: 50px;
	}

	.how-we-work-content h3{
		font-size: 18px;
	}

	.how-work-company-slider{
		margin-top: 30px;
		padding-top: 30px;
	}

	.our-skill-image{
		padding-bottom: 83px;
	}

	.our-skill-img-1{
		width: 200px;
		padding: 20px 0 0 20px;
	}

	.our-skill-img-2{
		width: 130px;
		top: 20px;
	}

	.our-skill-img-3{
		width: 200px;
	}

	.testimonial-rating{
		margin-bottom: 10px;
	}

	.testimonial-rating i{
		font-size: 16px;
	}

	.testimonial-content{
		margin-bottom: 20px;
	}

	.testimonial-content p{
        font-size: 16px;
    }

	.testimonial-body .author-content h3{
		font-size: 18px;
	}

	.testimonial-rating-counter .rating-counter h2{
        font-size: 38px;
    }

	.post-featured-image{
		margin-bottom: 15px;
	}

	.post-item-content{
		margin-bottom: 10px;
	}

	.post-item-content h3{
		font-size: 18px;
	}

	.footer-logo{
		margin-bottom: 20px;
	}

	.footer-social-links{
		justify-content: start;
		gap: 20px;
	}

	.footer-social-link-title h3{
		font-size: 18px;
	}

	.footer-links h3{
		margin-bottom: 15px;
	}

	.footer-links ul li{
		margin-bottom: 5px;
	}
	
	.footer-copyright{
		padding: 15px 0;
	}

	.page-header-box h1{
		font-size: 28px;
		margin-bottom: 5px;
	}

	.page-header-box ol li.breadcrumb-item{
        font-size: 16px;
    }

	.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
		font-size: 14px;
	}

	.about-facility-item{
        width: 100%;
    }

	.vision-mission{
		background: linear-gradient(180deg, var(--primary-color) 40%, var(--white-color) 40%);
	}

	.vision-mission-box{
        padding: 20px;
        gap: 40px;
    }

	.vision-mission-item{
		width: 100%;
	}

	.vision-mission-item::before{
		height: 1px;
		width: 100%;
		top: auto;
		right: 0;
		bottom: -20px;
	}

	.vision-mission-item:nth-child(2n + 2)::before{
		display: block;
	}

	.vision-mission-item:last-child::before{
		display: none;
	}
	
	.vision-mission-content h3{
		font-size: 18px;
	}

	.team-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 18px;
		padding-right: 30px;
	}

	.faq-accordion .accordion-item .accordion-button::after, 
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		top: 2px;
	}

	.faq-accordion .accordion-body{
		padding-right: 0;
	}

	.our-faqs-image img{
		aspect-ratio: 1 / 1.26;
	}

	.service-catagery-list h3{
		font-size: 18px;
	}

	.sidebar-cta-content h3{
		font-size: 18px;
	}

	.service-entry p{
		margin-bottom: 15px;
	}

	.service-feature-image{
        margin-bottom: 20px;
    }

	.service-feature-image img{
        aspect-ratio: 1 / 0.7;
    }

	.service-entry-list-image{
		gap: 20px;
	}

	.service-entry-image,
	.service-entry-list{
		width: 100%;
	}

	.post-image figure,
	.post-image img{
		aspect-ratio: 1 / 0.70;
	}

	.post-entry blockquote{
		background-position: 20px 20px;
        padding: 70px 20px 20px 20px;
	}
	
	.post-entry h2{
		font-size: 26px;
	}

	.project-single-image{
        margin-bottom: 20px;
    }

	.project-single-image img{
		aspect-ratio: 1 / 0.7;
	}

	.project-info,
	.project-design-highlight{
		margin-bottom: 20px;
	}

	.project-entry h2{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.project-entry p{
		margin-bottom: 15px;
	}

	.project-entry ul li{
        margin-bottom: 10px;
    }

	.project-entry ul li::before{
        font-size: 18px;
        top: 5px;
    }

	.project-gallery-images{
		gap: 20px;
	}

	.project-gallery-img{
		width: calc(50% - 10px);
	}

	.contact-us-image img{
        aspect-ratio: 1 / 0.75;
    }

	.google-map-iframe,
	.google-map-iframe iframe{
        height: 350px;
    }

	.contact-info-item{
		width: 100%;
	}

	.error-page-image img{
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Font Awesome Fallback (Ensure icons load in Persian page)          */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
			 url('../webfonts/fa-solid-900.ttf') format('truetype');
}
@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../webfonts/fa-regular-400.woff2') format('woff2'),
			 url('../webfonts/fa-regular-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Font Awesome 6 Brands';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../webfonts/fa-brands-400.woff2') format('woff2'),
			 url('../webfonts/fa-brands-400.ttf') format('truetype');
}

/* Force icon classes to use correct font-family if overridden */
html[lang='fa'] .fa,
html[lang='fa'] .fas,
html[lang='fa'] .fa-solid { font-family: 'Font Awesome 6 Free' !important; }
html[lang='fa'] .far,
html[lang='fa'] .fa-regular { font-family: 'Font Awesome 6 Free' !important; font-weight:400; }
html[lang='fa'] .fab,
html[lang='fa'] .fa-brands { font-family: 'Font Awesome 6 Brands' !important; }

/* Prevent accidental text-transform on icons */
html[lang='fa'] i.fa, html[lang='fa'] i.fas, html[lang='fa'] i.far, html[lang='fa'] i.fab { text-transform: none; }

.logo_top {
	font-size: 22px;
	font-family: "Saleh" !important;
}

/* -------------------------------------- */
/* FAQ + Showcase (between why-choose and services) */
/* -------------------------------------- */
.faq-showcase{ padding: 80px 0; }
.faq-showcase .section-title h3{ margin-bottom: 14px; }

/* FAQ */
.faq-accordion{ display:block; }
.faq-item{ background:#fff; border: 1px solid rgba(25,35,36,.12); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.05); }
.faq-q{ width:100%; text-align:right; background:transparent; border:0; padding: 10px 32px 10px 10px; font-weight:700; color: var(--primary-color); position: relative; }
.faq-q:after{ content:'\f107'; font-family: "Font Awesome 6 Free"; font-weight:900; position:absolute; left:10px; top:50%; transform: translateY(-50%) rotate(0deg); transition: transform .2s ease; }
.faq-item.active .faq-q:after{ transform: translateY(-50%) rotate(180deg); }
.faq-a{ color:#4d5758; font-size: 15px; line-height:1.8; display:none; padding: 0 6px 10px; }

/* Showcase grid */
.showcase-grid{ display:flex; flex-direction:column; gap: 10px; }
/* Build each row with 12 columns so we can vary widths by spanning columns */
.showcase-grid .grid-row{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.showcase-grid .project-item{ margin: 0; height: auto; } /* override generic card spacing */
.showcase-grid .shot{ border-radius: 12px; overflow:hidden; background:#f3f5f4; box-shadow: 0 6px 20px rgba(0,0,0,.06); position: relative; height: 220px; }
.showcase-grid .shot .project-featured-image figure::before{ border-radius: 12px; }
/* Make inner wrappers inherit the tile height */
.showcase-grid .project-image,
.showcase-grid .project-featured-image,
.showcase-grid .project-featured-image figure,
.showcase-grid .project-featured-image figure.image-anime{ height: 100%; }
.showcase-grid .project-image,
.showcase-grid .project-featured-image{ display:block; }
.showcase-grid .project-featured-image figure.image-anime{ display:block; }
/* Crop images inside fixed-height tiles (don’t just shrink); override earlier aspect-ratio rule */
.showcase-grid .project-featured-image img,
.showcase-grid .shot img{ width:100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; display:block; }
/* Width patterns: vary widths via grid-column span while keeping constant height */
.showcase-grid .grid-row.pattern-a .shot:nth-child(1){ grid-column: span 5; }
.showcase-grid .grid-row.pattern-a .shot:nth-child(2){ grid-column: span 3; }
.showcase-grid .grid-row.pattern-a .shot:nth-child(3){ grid-column: span 4; }

.showcase-grid .grid-row.pattern-b .shot:nth-child(1){ grid-column: span 4; }
.showcase-grid .grid-row.pattern-b .shot:nth-child(2){ grid-column: span 5; }
.showcase-grid .grid-row.pattern-b .shot:nth-child(3){ grid-column: span 3; }

.showcase-grid .grid-row.pattern-c .shot:nth-child(1){ grid-column: span 3; }
.showcase-grid .grid-row.pattern-c .shot:nth-child(2){ grid-column: span 4; }
.showcase-grid .grid-row.pattern-c .shot:nth-child(3){ grid-column: span 5; }

.showcase-grid .project-image{ position: relative; }
.showcase-grid .project-btn a{ width: 70px; height: 70px; }
.showcase-grid .project-btn img{ max-width: 18px; }

@media (max-width: 991.98px){
	.faq-showcase{ padding: 24px 0; }
		/* Keep fixed tile height on tablets; width differences remain via column spans */
		.showcase-grid .shot{ height: 180px; }
}
@media (max-width: 575.98px){
		/* Mobile: shorter fixed tile height; images still crop */
		.showcase-grid .shot{ height: 140px; }
		.second-nav { width: 95% !important; }
		.topbar { width: 100% !important; border-radius: 0px;}
		html[lang="fa"] .second-nav .header-btn {margin-left: 0px;}
}

.my_images {
	border-radius: 37px !important;
}

.hero-content .section-title {
	height: 480px;
}

/* ----------------------------- */
/* Services page: slider polish  */
/* ----------------------------- */
.service-products{ padding: 30px 0 10px; }
.service-products .row{ align-items: stretch; }
.service-products .service-panel-basic{
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto; /* logo, text, spacer, cta */
	align-items: center;
	justify-items: start;
	padding: 26px;
	border-radius: 40px; /* big rounded like reference */
	color: #fff;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(25,35,36,0.88);
	box-shadow: 0 18px 50px rgba(0,0,0,.12);
	overflow: hidden;
	height: 100%;
}
/* RTL: align contents to the right edge */
html[dir="rtl"] .service-products .service-panel-basic{ justify-items: end; text-align: right; }
html[dir="rtl"] .service-products .service-panel-basic .panel-cta{ justify-self: start; }
/* Curved white separator between panel and slider */

@media (max-width: 991.98px){
	html[dir="rtl"] .service-products .service-panel-basic::before{ display:none; }
}

/* Panel internal layout */
.service-products .service-panel-basic .panel-brand img{
	height: 40px; opacity: .95; filter: brightness(0) invert(1); display:block; margin-bottom: 16px;
}
.service-products .service-panel-basic .panel-eyebrow{
	opacity: .85; margin-bottom: 6px; font-weight: 600;
}
.service-products .service-panel-basic .panel-title{
	margin: 0 0 8px 0; font-weight: 800; font-size: 26px; color: #fff;
}
.service-products .service-panel-basic .panel-cta{
	margin: auto auto 0px auto;
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: var(--primary-color);
	border: 2px solid #fff; border-radius: 999px; padding: 10px 16px; font-weight: 800;
}
.service-products .service-panel-basic .panel-cta i{ color: inherit; }
.service-products .service-panel-basic .panel-cta:hover{ background: #f6f8f7; color: var(--primary-color); }

/* Nicer local nav buttons inside this section only */
.service-products .best-seller-nav{ width: 52px; height: 52px; background: #fff; border: 1px solid rgba(25,35,36,.14); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.service-products .best-seller-prev{ right: -10px; }
.service-products .best-seller-next{ left: -10px; }

.panel-text {
	margin: auto;
	text-align: center;
	padding: 53px;
}

/* ----------------------------- */
/* Shop Page                     */
/* ----------------------------- */
.shop-page{ padding: 20px 0 80px; }

.shop-sidebar{
	background: #fff;
	border: 1px solid rgba(25,35,36,.12);
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 12px 28px rgba(0,0,0,.06);
	position: sticky;
	top: 120px;
}

.shop-filter + .shop-filter{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider-color); }
.shop-filter .filter-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 800;
	color: var(--primary-color);
	margin-bottom: 12px;
}
.shop-filter .filter-heading{ font-size: 16px; margin-bottom: 10px; font-weight: 700; }
.shop-filter .filter-row{ display: flex; align-items: center; gap: 10px; }
.shop-filter .filter-label{ color: #4f595a; font-weight: 600; }
.shop-filter .filter-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-filter .filter-list label{ display: flex; align-items: center; gap: 8px; color: #4f595a; font-size: 14px; }
.shop-filter .filter-list input{ accent-color: var(--primary-color); }

/* Toggle switch */
.shop-filter .switch{ position: relative; display: inline-block; width: 44px; height: 24px; }
.shop-filter .switch input{ opacity: 0; width: 0; height: 0; }
.shop-filter .switch .slider{
	position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
	background-color: #e5e9e7; transition: .2s; border-radius: 999px;
}
.shop-filter .switch .slider:before{
	position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 3px;
	background-color: #fff; transition: .2s; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.shop-filter .switch input:checked + .slider{ background-color: var(--primary-color); }
.shop-filter .switch input:checked + .slider:before{ transform: translateX(20px); }

.price-range input[type="range"]{ width: 100%; accent-color: var(--primary-color); }
.price-values{ display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #6b7475; margin-top: 6px; }

.shop-toolbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border: 1px solid rgba(25,35,36,.12);
	border-radius: 14px;
	background: #fff;
	margin-bottom: 20px;
	box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.shop-toolbar .results-count{ font-weight: 700; color: var(--primary-color); }
.shop-toolbar .toolbar-filters{ display: flex; align-items: center; gap: 20px; }
.shop-toolbar .toolbar-group{ display: flex; align-items: center; gap: 8px; }
.shop-toolbar .toolbar-label{ font-size: 14px; color: #6b7475; margin: 0; white-space: nowrap; }
.shop-toolbar .form-select{ min-width: 160px; border-radius: 999px; border-color: rgba(25,35,36,.16); font-size: 14px; padding: 6px 36px 6px 12px; }

/* Product Card Updates for Shop */
.product-card{ 
    position: relative; 
    height: 100%; /* enforce height in grid */
    transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ 
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.product-card .prod-thumb{ position: relative; } /* context for badge */
.product-card .shop-badge{
	position: absolute; top: 12px; right: 12px; z-index: 2;
	background: var(--primary-color); color: #fff;
	font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.product-card .shop-badge.sale{ background: #d63f3f; }

.product-card .prod-category{
    font-size: 13px;
    color: #9aa5a6;
    margin-bottom: 6px;
    font-weight: 500;
}

.shop-cta{ display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 991.98px){
	.shop-sidebar{ position: static; }
	.shop-toolbar{ flex-direction: column; align-items: flex-start; gap: 10px; }
}


@media (min-width: 992px) and (max-width: 1298px){
	#menu {
		padding-right: 0px;
	}
	.main-menu .nav-menu-wrapper > ul {
		gap: 5px;
	}

	.topbar {
		width: 76%;
	}

	.second-nav {
		width: 63%;
	}
}

@media (min-width: 1201px) and (max-width: 1300px){
	.topbar {
		width: 76%;
	}
	.hero {
		min-height: 623px;
		max-height: 676px;
	}
}

/* Phones: <768px — keep horizontal menu; widen second nav for more space; no hamburger */
@media (max-width: 767.98px){
	.second-nav .navbar-collapse.main-menu{ display:flex !important; align-items:center; }
	.second-nav .main-menu .nav-menu-wrapper{ display:block !important; }
	/* Keep items inline horizontally like desktop */
	.second-nav .navbar-nav{ display:flex !important; flex-direction: row !important; align-items:center; flex-wrap: nowrap; }
	.navbar-toggle, .slicknav_menu{ display:none !important; }
	/* Extra-tight spacing */
	.main-menu .nav-menu-wrapper > ul{ gap: 4px; white-space: nowrap; padding-right: 0px;}
	.main-menu ul li{ margin: 0 3px; }
	.main-menu ul li a{ font-size: 13px; padding: 8px 8px !important; }
	
}

/* Tablets: 768–991px — show horizontal menu with smaller typography; hide hamburger */
@media (min-width: 768px) and (max-width: 991.98px){
	.second-nav .main-menu .nav-menu-wrapper{ display: block !important; }
	.navbar-toggle, .slicknav_menu{ display: none !important; }
	/* Force horizontal inline menu like desktop */
	.second-nav .navbar-collapse.main-menu{ display:flex !important; align-items:center; }
	.second-nav .navbar-nav{ display:flex !important; flex-direction: row !important; align-items:center; flex-wrap: nowrap; }
	.main-menu .nav-menu-wrapper > ul{ gap: 6px; white-space: nowrap; padding-right: 0px;}
	.main-menu ul li{ margin: 0 4px; }
	.main-menu ul li a{ font-size: 14px; padding: 8px 10px !important; }
	
}

@media (min-width: 768px) and (max-width: 891.98px){
	.second-nav { width: 75% !important;}
	.topbar { width: 88% !important; }
}


/* Topbar label trimming between 425px and 656px: keep only number/time */
@media (max-width: 656px){
	.topbar .phone-number{ font-size: 0 !important; }
	.topbar .phone-number::before{
		content: "۰۹۱۲۴۶۲۴۲۹۵";
		direction: ltr; /* Ensure proper LTR rendering for mixed nums */
		font-size: 16px; font-weight: 700; line-height: 1; color: #fff;
	}
	.topbar .work-time{ font-size: 0 !important; }
	.topbar .work-time::before{
		content: "۹ الی ۱۷";
		font-size: 16px; font-weight: 700; line-height: 1; color: #fff;
	}
}

@media (max-width: 436px){
	.topbar .topbar-row {padding: 0px;}
}

@media (max-width: 484px){
	.topbar .topbar-row {padding: 2px;}
}

@media (min-width: 1023px) and (max-width: 1079px){
	.main-menu ul li a {
		padding: 11px 12px !important;
	}
}

@media (max-width: 485.98px){
	.second-nav	{ width: 100% !important;}
	.faq-q { font-size: 15px;padding: 10px;}
	.col-lg-6 .section-title { margin-top: 10px; margin-bottom: 10px;} 
}


@media (max-width: 363px){
	.topbar .container {padding-left: 7px; padding-right: 7px;}
}

@media (max-width: 339px){
	.topbar-left .fa-solid {display: none;}
}

@media (min-width: 1300px){
	.hero {
		min-height: 623px;
		max-height: 716px;
	}
}

@media (min-width: 1200px) and (max-width: 1310px){
	.categories-card-wrapper {
		width: 98%;
		margin: auto;
	}

	.hero {
		min-height: 623px;
		max-height: 646px;
	}
}


/* --- Updated Global Menu Active Fix --- */
.main-menu ul li a.active {
    color: var(--white-color) !important; 
}
/* Ensure the underline is visible */
.main-menu ul li a.active::after {
    background: var(--white-color) !important;
}

/* --- New Shop Breadcrumb & Header --- */
.shop-header-container {
    padding-top: 30px; 
    padding-bottom: 20px;
    background: #fff;
}
.shop-breadcrumb-row {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
    font-weight: 500;
}
.shop-breadcrumb-row a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}
.shop-breadcrumb-row a:hover {
    color: var(--primary-color);
}
.shop-breadcrumb-sep {
    margin: 0 8px;
    color: #ccc;
    font-size: 12px;
}
.shop-breadcrumb-current {
    color: #999;
}

/* Horizontal Categories List */
.shop-categories-wrapper {
    margin-bottom: 30px;
    border-bottom: none;
    padding-bottom: 20px;
}
.shop-categories-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.shop-categories-list::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome */
}
.shop-cat-pill {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse; /* Icons to the right, text to the left */
    gap: 8px; /* space between icon and text */
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    color: #444;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}
.shop-cat-pill i {
    margin-left: 0;
    margin-right: 0;
    font-size: 16px;
    color: #888;
    transition: color 0.2s;
}
.shop-cat-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #fcfcfc;
}
.shop-cat-pill:hover i {
    color: var(--primary-color);
}
.shop-cat-pill.active {
    background: #f2f5f4; /* Subtle grey/green tint */
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700; /* Bold text */
}
.shop-cat-pill.active i {
    color: var(--primary-color);
}

/* --- New Sort Toolbar (Text Links) --- */
.shop-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out count and sorts */
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    padding: 10px 0;
}
.shop-sort-options {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.shop-products-count {
    color: #999;
}
.shop-sort-label {
    display: flex; 
    align-items: center; 
    font-weight: 700;
    color: #333;
    margin-left: 10px;
}
.shop-sort-label i {
    margin-left: 6px;
    font-size: 16px;
}
.shop-sort-item {
    cursor: pointer;
    color: #777;
    transition: color 0.2s;
    position: relative;
    padding: 4px 0;
}
.shop-sort-item:hover {
    color: var(--primary-color);
}
.shop-sort-item.active {
    color: var(--primary-color);
    font-weight: 700;
}
/* Small dot indicator for active sort if desired, or just color */

@media (max-width: 768px) {
    .shop-sort-bar {
        gap: 10px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }
}

/* --- Shop Layout Adjustments --- */
/* 1. Reduce padding for shop page main section to close the gap */
.shop-page {
    padding-top: 20px !important;
}

/* 2. Adjust shop helper container for correct stacking under the page header */
.shop-header-container {
    padding-top: 30px; /* Reduced from 120px since it's under the hero now */
    padding-bottom: 0px; 
    background: #fff;
}

/* 3. Remove bottom border from category wrapper as requested */
.shop-categories-wrapper {
    border-bottom: none !important;
    margin-bottom: 20px;
    padding-bottom: 0px; 
}

/* Ensure no double borders or weird spacing */
.shop-sort-bar {
    border-top: 1px solid #eee; /* Maybe add top border here instead? Or just clean */
    padding-top: 20px;
}

/* Clean up old header container styles */
.shop-header-container {
    display: none;
}
/* Ensure breadcrumb row inside the main container looks good */
.shop-breadcrumb-row {
    margin-top: 0;
    padding-bottom: 15px;
}

/* --- Product Single Page Styles --- */

/* Page Layout */
.product-details-page {
    padding: 60px 0 100px;
}

/* Sidebar Sticky */
.sidebar-sticky-col {
    position: sticky;
    top: 100px; /* Height of header */
    margin-bottom: 40px;
}

/* Video Sidebar Banner */
.sidebar-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
    background-color: #000;
    cursor: pointer;
}
.sidebar-banner img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.sidebar-banner:hover img {
    opacity: 0.6;
}
.sidebar-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
}
.sidebar-banner:hover .sidebar-play-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Sidebar Downloads */
.sidebar-downloads h4 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 700;
}
.sidebar-btn-blue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0056b3; /* Deep blue */
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: background 0.3s;
    font-weight: 500;
}
.sidebar-btn-blue:hover {
    background: #004494;
}
.sidebar-btn-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
    font-weight: 500;
    gap: 10px;
}
.sidebar-btn-dark:hover {
    background: #000;
}
.download-icon {
    font-size: 18px;
}

/* Gallery Section */
.product-gallery {
    margin-bottom: 30px;
}
.product-main-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #eee;
    background: #f9f9f9;
}
.product-main-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.gallery-zoom-btn {
    position: absolute;
    bottom: 15px;
    left: 15px; /* Persian uses RTL logic visually but icons might need specific placement */
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}
.gallery-zoom-btn:hover {
    background: var(--primary-color);
    color: #fff;
}
.product-thumbs {
    display: flex;
    gap: 12px;
}
.thumb-item {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s;
}
.thumb-item.active, .thumb-item:hover {
    opacity: 1;
    border-color: var(--primary-color);
}
.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
.product-info h1 {
    font-size: 28px; 
    font-weight: 800;
    margin-bottom: 10px;
    color: #222;
}
.product-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.product-description {
    color: #555;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}
.product-feature-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}
.p-feat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
.p-feat-item i {
    font-size: 24px;
    color: var(--primary-color);
}

/* Product CTA Box */
.product-cta-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}
.price-tag {
    font-size: 22px; 
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    display: block;
}
.product-size-select-group label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.product-size-select-group select {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}
.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.btn-primary-action {
    flex: 1;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-primary-action:hover {
    background: #b33939; /* darken primary */
    color: #fff;
}
.btn-whatsapp-action {
    flex: 1;
    background: #25D366;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s;
}
.btn-whatsapp-action:hover {
    background: #1ebc57;
    color: #fff;
}

/* Tabs Section */
/* .product-tabs-section {
    margin-top: 60px;
} */
.p-tabs-nav {
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    display: flex;
    gap: 30px;
}
.p-tab-link {
    padding-bottom: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #777;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    background: none;
    border: none;
}
.p-tab-link.active {
    color: var(--primary-color);
}
.p-tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
}
.tab-pane {
    display: none;
}
.tab-pane.show {
    display: block;
    animation: fadeIn 0.5s;
}

/* Specs Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
}
.specs-table tr {
    border-bottom: 1px solid #eee;
}
.specs-table th {
    width: 30%;
    padding: 15px;
    background: #f9f9f9;
    font-weight: 600;
    color: #555;
    text-align: right;
}
.specs-table td {
    padding: 15px;
    color: #333;
}

/* Related Products */
.related-products-section {
    padding-top: 40px;
    border-top: 1px solid #eee;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .sidebar-sticky-col {
        position: static;
        order: 2; /* Move below on mobile if flex configured, but col order handles it */
        margin-top: 40px;
    }
    .cta-buttons {
        flex-direction: column;
    }
}

/* --- REVISED Product Single Page Styles (Matching Reference) --- */

/* Page Container */
.page-product {
    padding-top: 40px;
    background-color: #fff;
}

/* Breadcumb & Meta override */
.page-header-box h1 {
    font-size: 24px;
    margin-bottom: 10px;
}
.breadcrumb {
    background: transparent;
    padding: 0;
}

/* Inner Layout */
.product-gallery {
    padding: 15px;
    background: #fff;
    margin-bottom: 30px;
}

.product-main-img {
    border: none;
    background: #fff;
    margin-bottom: 10px;
    border-radius: 4px;
}

.product-thumbs {
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.thumb-item {
    width: 70px;
    height: 70px;
    border: 1px solid #eee;
    opacity: 0.7;
    border-radius: 4px;
}
.thumb-item.active {
    opacity: 1;
    border-color: #333;
}

/* Product Info Column */
.product-info h2.product-title {
    font-size: 26px;
    font-weight: 800;
    color: #222;
    margin-bottom: 25px;
    line-height: 1.4;
}

.product-features-list h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #444;
}

.product-features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-features-list ul li {
    position: relative;
    padding-right: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.product-features-list ul li::before {
    content: "•";
    color: #ccc;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: -5px;
}

/* Call to Action Box (Price & Contact) */
.product-cta-box {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.product-size-select-group label {
    font-size: 14px;
    color: #666;
}

.btn-product-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #d32f2f; /* Red from brand or generic contact color */
    color: #fff !important;
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    text-align: center;
}

.btn-product-contact span {
    display: block;
}

.btn-product-contact:hover {
    background: #b71c1c;
}

.phone-display {
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px;
    direction: ltr; /* Ensure phone number format */
}

/* Standard Badge */
.product-standard-box {
    margin-top: 20px;
    border: 1px solid #ffd700;
    background: #fff9c4;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #856404;
    font-size: 13px;
    line-height: 1.5;
}
.product-standard-box i {
    font-size: 24px;
}

/* Tabs & Content */
/* .product-tabs-section {
    margin-top: 50px;
} */

.p-tabs-nav {
    border-bottom: 2px solid #eee;
    justify-content: flex-start;
    gap: 40px;
}

.p-tab-link {
    font-size: 16px;
    color: #888;
    padding-bottom: 15px;
    font-weight: 700;
    background: transparent;
}

.p-tab-link.active {
    color: #333;
}

.p-tab-link.active::after {
    height: 3px;
    background: #333;
}

.tab-content-text h3 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 700;
    border-right: 4px solid var(--primary-color);
    padding-right: 15px;
    color: #333;
}

.tab-content-text p, .tab-content-text li {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    text-align: justify;
}

/* Video inside description */
.desc-video-container {
    margin: 30px 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}
.desc-video-container img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}
.desc-video-container:hover img {
    transform: scale(1.02);
}

/* Sidebar in Content Area */
.sidebar-links-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.sidebar-btn-blue, .sidebar-btn-dark {
    justify-content: center;
    text-align: center;
    font-size: 14px;
}

/* Review Section (Matches reference form) */
.review-form-box {
    background: #fafafa;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 30px;
}
.review-form-box h4 {
    font-size: 18px;
    margin-bottom: 20px;
}
.form-group label {
    font-size: 13px;
    margin-bottom: 8px;
    color: #666;
}
.form-control {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
}


/* --- Gallery & Category Fixes --- */

/* Shop Categories in Product Page */
.shop-categories-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.shop-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 50px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
}
.shop-cat-pill:hover, .shop-cat-pill.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.shop-cat-pill i {
    font-size: 14px;
}

/* Gallery Main Image Fix */
.product-main-img {
    height: 500px; /* Fixed height container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.product-main-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Let width adjust */
    height: auto; /* Let height adjust */
    object-fit: contain; /* Ensure full image is visible */
}

/* Gallery Thumbnails Fix */
.product-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px; /* Scrollbar space */
}
.thumb-item {
    flex: 0 0 70px; /* Don't shrink */
    height: 70px;
}

/* Responsive adjust */
@media (max-width: 768px) {
    .product-main-img {
        height: 350px;
    }
}

/* --- Product Single UI Enhancements --- */


/* Product Info Card Styling */
.product-info {
    padding: 35px;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    border: 1px solid #f0f2f5;
    transition: transform 0.3s ease;
}

.product-info:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.product-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 20px;
    letter-spacing: -0.5px;
}

.product-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    border-radius: 2px;
}

.product-features-list {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 25px;
}

.product-features-list h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-features-list h3 i {
    color: var(--accent-color);
}

.product-features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-features-list ul li {
    margin-bottom: 12px;
    padding-right: 28px;
    position: relative;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}

.product-features-list ul li:last-child {
    margin-bottom: 0;
}

.product-features-list ul li::before {
    content: '\f00c'; /* check icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 3px;
    color: var(--accent-color);
    font-size: 14px;
}

.product-features-list ul li strong {
    color: var(--primary-color);
    font-weight: 600;
}

.product-standard-box {
    display: flex;
    align-items: center;
    background: #fff8e1;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #ffe082;
}

.product-standard-box .standard-text {
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
}

.product-info .btns-group .btn-default {
    border-radius: 12px;
    font-size: 15px;
    padding: 14px 20px;
}

.product-info .btns-group .btn-border {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.product-info .btns-group .btn-border:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Related Products Section (Matching Best Sellers) */
.related-products-section {
    padding-top: 60px;
    padding-bottom: 40px;
    border-top: 1px solid #eee;
    margin-top: 80px;
}

.related-products-section .section-title h2 {
    font-size: 36px;
    margin-bottom: 10px;
}


.shop-cat-pill:hover i, .shop-cat-pill.active i {
    color: #fff !important;
}

/* --- Product Single Header Adjustments --- */
/* Hide the title & breadcrumb container */
.single-product-page-header .page-header-box {
    display: none !important;
}

/* Reduce padding/height of the header */
.single-product-page-header {
    min-height: 120px !important; /* Force smaller height */
    padding: 20px 0 !important;
    background-position: center !important; 
    /* If there's an overlay or image, it stays but shorter */
}

/* Ensure the header content is hidden but structure remains if needed for spacing */
.single-product-page-header .container {
    opacity: 0; 
    pointer-events: none;
}
/* Enforce related products styling to match Best Sellers slider exactly */
.related-products-wrapper .best-seller-slider .swiper {
    padding-bottom: 40px; /* Space for pagination if needed */
}
.related-products-wrapper .best-seller-nav {
    display: flex !important; /* Force visible */
}

/* Override existing page header height styles */
.page-header.single-product-page-header {
    height: 120px !important;
    min-height: 120px !important;
    padding: 0 !important;
}

/* Ensure no text is visible in that header */
.single-product-page-header .page-header-box {
    display: none !important;
}

/* --- Fix Product Single Header --- */
/* Restore visibility but keep it small */
.page-header.single-product-page-header {
    height: 250px !important; /* Increased from 120px to be visible behind navbar */
    min-height: 250px !important;
    padding-top: 100px !important; /* Push content down if we had any, or just for spacing */
    display: flex !important;
    align-items: center;
    margin-top: 0 !important;
}

/* Ensure the background image shows */
.single-product-page-header {
    background-size: cover !important;
    background-position: center !important;
}

/* --- Footer CTA Banner (Glass Redesign - Dual Person) --- */
.footer-cta-wrapper {
    position: relative;
    margin-top: 100px;
    margin-bottom: -60px; /* Pull footer up or push this down to overlap */
    z-index: 20; /* High z-index to sit on top of footer */
    padding: 0 15px;
}

.footer-cta-box {
    /* Glass Effect matching Index Categories */
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    
    border-radius: 24px;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Center content between images */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    overflow: visible;
    max-width: 1140px;
    margin: 0 auto;
}

/* Remove old pattern */
.footer-cta-box::before { display: none; }

.footer-cta-content {
    display: flex;
    flex-direction: column;
    z-index: 4; /* Above shadows */
    text-align: center;
    /* Remove side paddings as content is centered */
    margin: 0 auto; 
    padding: 0;
}

.footer-cta-text {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.footer-cta-phone {
    display: flex;
    align-items: center;
    gap: 20px;
    direction: ltr; /* Phone number formatting */
    justify-content: center;
}

.footer-cta-phone .phone-number {
    font-size: 56px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #fff, #dadada);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.footer-cta-phone .call-text {
    font-size: 20px;
    color: rgba(255,255,255,0.95);
    font-weight: 500;
    border-right: 2px solid rgba(255,255,255,0.3);
    padding-right: 20px;
}

/* --- Left Person (Architect with Tablet) --- */
/* The previous image, moved to Left */
.footer-cta-person-left {
    position: absolute;
    bottom: -1px; /* Align perfectly with bottom border */
    left: 40px;
    height: 145%; /* Pop out */
    width: auto;
    z-index: 5;
    filter: drop-shadow(5px 5px 20px rgba(0,0,0,0.3)); /* Shadow to right */
    pointer-events: none;
    /* Typically this image faces right, so no flip needed if he looks into center */
}

/* --- Right Person (Engineer with Yellow Helmet) --- */
/* The new image, moved to Right */
.footer-cta-person-right {
    position: absolute;
    bottom: -1px;
    right: 40px;
    height: 145%;
    width: auto;
    z-index: 5;
    filter: drop-shadow(-5px 5px 20px rgba(0,0,0,0.3)); /* Shadow to left */
    pointer-events: none;
    transform: scaleX(-1); /* Flip horizontally so he looks left (into content) */
}


/* Responsive */
@media (max-width: 991px) {
    .footer-cta-box {
        flex-direction: column;
        padding: 40px 20px;
        border-radius: 24px;
        margin-bottom: 0px !important; /* Remove negative margin here too */
        justify-content: center;
    }
    
    /* Hide specific images on mobile */
    .footer-cta-person-left, 
    .footer-cta-person-right {
        display: none; 
    }
    
    .footer-cta-content {
        align-items: center;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .footer-cta-text {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .footer-cta-phone {
        margin-top: 10px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .footer-cta-phone .phone-number {
        font-size: 36px;
    }
    .footer-cta-phone .call-text {
        font-size: 16px;
        border-right: 0;
        padding-right: 0;
    }
}

/* --- Compact Header FIX --- */
/* Ensure the page header height is forced down */
.page-header.compact-page-header {
    height: 250px !important;
    min-height: 250px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Hide inner box */
.compact-page-header .page-header-box {
    display: none !important;
}

/* Breadcrumb Styling */
.page-breadcrumb-row {
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 500;
}
.page-breadcrumb-row a {
    color: #333;
    text-decoration: none;
}
.page-breadcrumb-sep {
    color: #ccc;
    margin: 0 5px;
}
.page-breadcrumb-current {
    color: #888;
}

/* --- Force Compact Header Height (Final Fix) --- */
.page-header.compact-page-header {
    height: 250px !important;
    min-height: 250px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    background-size: cover;
    background-position: center;
}
.compact-page-header .page-header-box {
    display: none !important;
}

/* --- FINAL FIX for Compact Headers (Services, About, Contact) --- */
/* Ensure they match the Shop/Product header exactly */
.page-header.compact-page-header {
    margin-top: 0 !important;        /* Crucial: Pulls the header down from under navbar */
    height: 250px !important;        /* Matches Shop/Product height */
    min-height: 250px !important;
    padding-top: 100px !important;   /* Matches Shop/Product padding */
    padding-bottom: 0 !important;    /* Reset bottom padding */
    display: flex !important;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
}

/* --- Contact Page Redesign Fix 2 --- */

/* Wrapper for clean spacing */
.contact-page-wrapper {
    padding-bottom: 60px;
}

/* Card Style for Form & Info */
.contact-card {
    padding: 40px;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03);
    border: 1px solid #f0f2f5;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}

/* Info List */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info-item {
    margin-bottom: 35px;
    padding-right: 20px;
    position: relative;
}

.contact-info-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    opacity: 0.7;
}

.contact-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #444; 
    margin-bottom: 8px;
    display: block;
}

.contact-info-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 5px;
}

.contact-link-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #007bff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 5px;
    transition: all 0.3s;
}
.contact-link-action:hover {
    color: #0056b3;
}

/* Store / Branch Card */
.store-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary-color);
}
.store-section-desc {
    color: #777;
    margin-bottom: 40px;
    line-height: 1.6;
}

.branch-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}
.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}

.branch-map-container {
    height: 200px;
    width: 100%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.branch-map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branch-info {
    padding: 25px;
}

.branch-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.branch-address {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.branch-work-hours {
    font-size: 12px;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
}

/* --- New Contact Page Features Grid (Clean Write) --- */

.contact-feature-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid #f0f2f5;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: transparent;
}

.contact-feature-card .icon-wrapper {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-color);
    font-size: 24px;
    transition: all 0.3s;
}

.contact-feature-card:hover .icon-wrapper {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
}

.contact-feature-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.contact-feature-card p {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Phone Number Styling */
.contact-feature-card .phone-link {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    direction: ltr; /* Ensure numbers display correctly */
    margin-bottom: 10px;
}

/* Status Badge */
.contact-feature-card .status-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

/* Action Link */
.contact-feature-card .action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #eee;
    padding: 10px 20px;
    border-radius: 12px;
    transition: 0.3s;
    width: 100%;
}
.contact-feature-card .action-link:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Social Icons in Card */
.contact-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.contact-socials a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f5;
    color: #555;
    font-size: 18px;
    transition: 0.3s;
}
.contact-socials a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Map Iframe Styling */
#map iframe {
    filter: grayscale(100%);
    transition: filter 0.3s;
}
#map iframe:hover {
    filter: grayscale(0%);
}

/* --- About Page Redesign --- */

.about-page-wrapper {
    padding-bottom: 80px;
}

/* 1. Hero / Intro Text */
.about-intro-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.about-intro-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.about-intro-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}

/* 2. Brand Story (Image + Text) */
.story-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #f0f2f5;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

.story-image-wrapper {
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 400px;
}
.story-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.story-image-wrapper:hover img {
    transform: scale(1.05);
}

.story-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-color);
}
.story-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

/* 3. Core Values Grid */
.values-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

.value-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    border: 1px solid #f0f2f5;
    transition: all 0.3s;
    height: 100%;
}
.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: transparent;
}

.value-icon {
    width: 60px;
    height: 60px;
    background: #e3f2fd; /* Light Blue */
    color: #1565c0;       /* Dark Blue */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
    transition: 0.3s;
}
.value-card:hover .value-icon {
    background: #1565c0;
    color: #fff;
    border-radius: 50%;
}

.value-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}
.value-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

/* 4. Stats Bar */
.stats-bar {
    background: var(--primary-color);
    padding: 60px 0;
    border-radius: 24px;
    margin-bottom: 80px;
    color: #fff;
    text-align: center;
}
.stat-item h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #fff;
}
.stat-item p {
    font-size: 16px;
    opacity: 0.8;
}

/* 5. Process Steps */
.process-section {
    margin-bottom: 60px;
}
.process-step-card {
    position: relative;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
    text-align: right;
    height: 100%;
}
.process-step-number {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--accent-color);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.process-content {
    margin-top: 20px;
}
.process-icon {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: inline-block;
}
.process-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.process-desc {
    font-size: 14px;
    color: #666;
}

/* --- Friendly & Realistic Updates --- */

/* Softer, more inviting typography for section headers */
.about-intro-title {
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 25px;
}

/* Story Card: More breathing room and softer look */
.story-card {
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05); /* Softer, larger shadow */
    padding: 50px; /* More space */
    position: relative;
    overflow: hidden;
}

/* Decorative element for story card */
.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
}

.story-content h3 {
    font-size: 32px;
    margin-bottom: 25px;
}

.story-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 25px;
}

/* Values: Make them look like helpful feature cards */
.value-card {
    border: 1px solid #eee;
    box-shadow: none; /* Flat by default */
    background: #fafafa; /* Slightly off-white */
    transition: all 0.4s ease;
}

.value-card:hover {
    background: #fff;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); /* Pop up on hover */
    border-color: transparent;
}

.value-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 28px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.value-card:hover .value-icon {
    background: var(--accent-color);
    color: #fff;
    transform: rotateY(180deg); /* Playful interaction */
}

/* Process: Step-by-step clear visual path */
.process-step-card {
    border: none;
    background: transparent;
    text-align: center; /* Center align for better flow */
    padding: 20px;
}

.process-step-number {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 20px;
    width: 40px;
    height: 40px;
    background: #eee;
    color: #888;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-step-card:hover .process-step-number {
    background: var(--accent-color);
    color: #fff;
    transform: scale(1.2);
}

.process-icon {
    font-size: 36px;
    margin-bottom: 25px;
    color: var(--primary-color);
    transition: 0.3s;
}
.process-step-card:hover .process-icon {
    color: var(--accent-color);
    transform: translateY(-5px);
}

/* Add a connector line between process steps on desktop */
@media (min-width: 992px) {
    .process-section .row {
        position: relative;
    }
    .process-step-card::after {
        content: '';
        position: absolute;
        top: 40px; /* Aligns with number roughly */
        left: -50%;
        width: 100%;
        height: 2px;
        background: #eee;
        z-index: -1;
    }
    .col-md-6:first-child .process-step-card::after,
    .col-lg-4:nth-child(1) .process-step-card::after,
    .col-lg-4:nth-child(4) .process-step-card::after { 
        /* Hide for first in row depending on grid, tricky with flex wrap, simplifiying: */
        display: none; 
    }
}

/* --- Projects Page Redesign --- */

.projects-page-wrapper {
    padding-top: 120px; /* Clear fixed header */
    padding-bottom: 80px;
    background: #fff;
    min-height: 100vh;
}

.projects-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.projects-intro h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--primary-color);
    letter-spacing: -1px;
}

.projects-intro p {
    color: #666;
    font-size: 16px;
}

/* Filter Buttons */
.projects-filter-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 50px;
}

.projects-filter-btn {
    padding: 10px 24px;
    border-radius: 50px;
    background: #f8f9fa;
    border: 1px solid #eee;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.projects-filter-btn:hover,
.projects-filter-btn.active-btn { /* active-btn class used by Isotope script */
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Project Card */
.project-card-new {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f2f5;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.project-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.project-thumb-new {
    position: relative;
    height: 280px; /* Fixed height for image area */
    overflow: hidden;
}

.project-thumb-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card-new:hover .project-thumb-new img {
    transform: scale(1.08);
}

.project-overlay-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.project-card-new:hover .project-overlay-btn {
    opacity: 1;
    transform: translateY(0);
}

.project-info-new {
    padding: 25px;
    text-align: right;
}

.project-cat-new {
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.project-title-new {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.4;
}

.project-title-new a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.project-title-new a:hover {
    color: var(--accent-color);
}

.project-location-new {
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start; /* Right aligned in RTL */
}

.project-location-new i {
    font-size: 14px;
    color: #ccc;
}

/* --- Blog Page Redesign --- */

.blog-page-wrapper {
    padding-top: 60px;
    padding-bottom: 100px;
    background: #f9f9f9; /* Light background for the whole page */
}

/* 1. Product Categories Slider (Pills) */
.blog-cat-slider-section {
    position: relative;
    margin-bottom: 40px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.blog-cat-slider .swiper-slide {
    width: auto; /* Allow pills to be intrinsic width */
}

.blog-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #f1f3f5;
    color: #555;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.blog-cat-pill:hover,
.blog-cat-pill.active {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.blog-cat-pill i {
    margin-left: 8px;
    font-size: 14px;
}

/* 2. Featured Posts Grid (Hero) */
.blog-featured-section {
    margin-bottom: 60px;
}

.featured-card-lg {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 420px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.featured-card-sm {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

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

.featured-img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.featured-card-lg:hover .featured-img-bg,
.featured-card-sm:hover .featured-img-bg {
    transform: scale(1.05);
}

.featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    text-align: right;
}

.featured-tag {
    display: inline-block;
    background: var(--accent-color);
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    align-self: flex-start;
}

.featured-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}

.featured-card-sm .featured-title {
    font-size: 18px;
}

.featured-meta {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    margin-top: 10px;
}

/* 3. Standard Blog List - Redesigned Cards */
.blog-card-new {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}

.blog-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.blog-card-thumb {
    height: 240px;
    overflow: hidden;
    position: relative;
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card-new:hover .blog-card-thumb img {
    transform: scale(1.1);
}

.blog-card-date {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-cat {
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.5;
}

.blog-card-title a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-card-title a:hover {
    color: var(--accent-color);
}

.blog-card-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1; 
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #777;
}

.blog-card-author img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s;
}

.blog-read-more:hover {
    gap: 8px;
    color: var(--accent-color);
}

/* --- Single Blog Page Styles --- */

.page-single-post {
    padding: 80px 0;
}

/* Post Featured Image */
.post-featured-wrapper {
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.post-featured-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post Meta Bar */
.post-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-meta-item i {
    color: var(--primary-color);
}

/* Post Content Typography */
.post-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 800;
}

.post-content h3 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: 700;
}

.post-content h4 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.post-content p {
    margin-bottom: 20px;
    line-height: 1.9;
    font-size: 16px;
    color: #444;
}

.post-content ul {
    list-style: none;
    padding-right: 20px;
    margin-bottom: 30px;
}

.post-content ul li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 12px;
}

.post-content ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 4px;
    color: var(--primary-color);
    font-size: 14px;
}

.post-content blockquote {
    background: #f9f9f9;
    border-right: 5px solid var(--primary-color);
    padding: 25px;
    margin: 40px 0;
    font-style: italic;
    font-size: 18px;
    color: #333;
    border-radius: 8px;
}

/* Post Footer & Tags */
.post-footer-section {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.post-tags .tag-label {
    font-weight: 700;
    color: #222;
    margin-left: 10px;
}

.post-tags a {
    display: inline-block;
    padding: 5px 12px;
    background: #f4f4f4;
    color: #666;
    border-radius: 20px;
    font-size: 13px;
    margin-left: 5px;
    transition: all 0.3s;
}

.post-tags a:hover {
    background: var(--primary-color);
    color: #fff;
}

.post-share i {
    font-size: 20px;
    color: #888;
    transition: 0.3s;
}

.post-share i:hover {
    color: var(--primary-color);
}

/* Author Box */
.author-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 12px;
    margin-top: 40px;
    gap: 20px;
}

.author-box .author-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.author-box h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}

.author-box p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Related Posts Section */
.related-posts-section {
    margin-top: 60px;
}

.section-title-sm {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-right: 15px;
}

.section-title-sm::before {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Sidebar Styling */
.blog-sidebar {
    padding-right: 20px; /* Space from content */
}
@media (max-width: 991px) {
    .blog-sidebar {
        padding-right: 0;
        margin-top: 50px;
    }
}

.sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 50px;
    height: 2px;
    background: var(--primary-color);
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li {
    margin-bottom: 12px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 12px;
}

.sidebar-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-list a {
    display: flex;
    justify-content: space-between;
    color: #555;
    font-size: 15px;
    transition: 0.3s;
}

.sidebar-list a:hover {
    color: var(--primary-color);
    padding-right: 5px;
}

.sidebar-list a span {
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: #888;
}

/* Sidebar Recent Posts */
.sidebar-post-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.sidebar-post-item:last-child {
    margin-bottom: 0;
}

.sidebar-post-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.sidebar-post-content h5 {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 5px;
    font-weight: 600;
}

.sidebar-post-content h5 a {
    color: #333;
    transition: 0.3s;
}

.sidebar-post-content h5 a:hover {
    color: var(--primary-color);
}

.sidebar-post-date {
    font-size: 12px;
    color: #999;
}

/* ----------------------------------------------------------------------------------------
*   17. Service Single css
* ---------------------------------------------------------------------------------------- */

.page-service-single {
    padding: 100px 0;
}

.service-featured-image {
    margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
}

.service-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.5s ease;
}

.service-featured-image:hover img {
    transform: scale(1.05);
}

.service-content-body h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 800;
}

.service-content-body h3 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 20px;
    position: relative;
    padding-right: 15px;
    font-weight: 700;
}

.service-content-body h3::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.service-content-body p {
    color: #555;
    margin-bottom: 15px;
    text-align: justify;
}

/* Service Icon Box */
.service-icon-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #eee;
}

.service-icon-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background: #fff;
    border-color: transparent;
}

.service-icon-box .icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-icon-box h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}

.service-icon-box p {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Service Process Timeline */
.service-process-timeline {
    position: relative;
    margin-top: 40px;
    padding-right: 20px;
    border-right: 2px dashed #ddd;
}

.process-item {
    position: relative;
    margin-bottom: 30px;
    padding-right: 30px;
}

.process-item:last-child {
    margin-bottom: 0;
}

.process-item .step-num {
    position: absolute;
    right: -41px; /* Adjust based on border and size */
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--white-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--primary-color);
    z-index: 1;
}

.process-item .step-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.process-item .step-content h5 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 700;
}

.process-item .step-content p {
    font-size: 14px;
    margin-bottom: 0;
    color: #666;
}

/* Sidebar Specifics */
.service-nav-list li a {
    display: block;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 8px;
    color: var(--text-color);
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-nav-list li a:hover,
.service-nav-list li a.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.service-nav-list li a i {
    font-size: 12px;
}

.contact-widget {
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

.contact-widget-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
}

.contact-widget h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
}

.contact-widget .phone-link {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-top: 15px;
}

/* FAQ Styling Fix for Single Page */
.service-faq .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
}
.service-faq .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
.service-faq .accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
}
.service-faq .accordion-button {
    background: transparent;
    padding: 20px 0;
    font-weight: 700;
    font-size: 16px;
}
.service-faq .accordion-body {
    padding: 0 0 20px 0;
    color: #666;
}

/* --- Fix FAQ Arrow Position (Service Single) --- */
.faq-q:after {
    left: auto !important;
    right: 20px !important;
    transform: translateY(-50%) rotate(0deg); /* Initial state */
}

/* Rotate when active */
.faq-item.active .faq-q:after {
    transform: translateY(-50%) rotate(-180deg) !important;
}

/* Adjust padding for text */
.faq-q {
    padding-right: 50px !important; /* Space for arrow */
    padding-left: 20px !important;
    text-align: right !important;
}

/* --- Fix Contact Widget Button Text Alignment --- */
.contact-widget .btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
}

/* --- Fix Phone Number Display --- */
.contact-widget .phone-link {
    direction: ltr !important;
    display: inline-block;
    unicode-bidi: embed;
}

/* --- Fix FAQ Arrow Position (Service Single) --- */
.faq-q:after {
    left: auto !important;
    right: 20px !important;
    transform: translateY(-50%) rotate(0deg); 
}

.faq-item.active .faq-q:after {
    transform: translateY(-50%) rotate(-180deg) !important;
}

.faq-q {
    padding-right: 50px !important; 
    padding-left: 20px !important;
    text-align: right !important;
}

/* --- Fix Contact Widget Button Text Alignment --- */
.contact-widget .btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
}

/* --- Fix Phone Number Display --- */
.contact-widget .phone-link {
    direction: ltr !important;
    display: inline-block;
    unicode-bidi: embed;
}

/* --- Fix Blog Category Icons --- */
.blog-cat-pill i {
    order: -1;          /* Move icon before text visually */
    margin-left: 8px;   /* Add space after icon (which is on the right of text in RTL) */
    margin-right: 0;    /* Reset right margin if any */
}

/* --- Mobile Fixes: RTL Overflow & Layout Adjustments --- */
@media screen and (max-width: 991.98px) {
    /* Reset large RTL margins/paddings causing horizontal overflow */
    html[lang="fa"] .about-us-images {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important; /* Small padding for safety */
        padding-right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: visible;
    }

    /* Adjust background position for RTL on mobile */
    html[lang="fa"] .about-us-images {
       background-position: center bottom !important;
    }

    html[lang="fa"] .our-skill-image {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Ensure no negative margins pull content out */
    html[lang="fa"] .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    html[lang="fa"] .container, 
    html[lang="fa"] .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 767.98px) {
    html[lang="fa"] .about-us-images {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* --- Mobile Fixes: Header Overflow --- */
@media screen and (max-width: 767.98px) {
    /* Allow the second nav menu to scroll horizontally if content overflows */
    .second-nav .main-menu .nav-menu-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        scrollbar-width: none; /* hide scrollbar on Firefox */
    }
    .second-nav .main-menu .nav-menu-wrapper::-webkit-scrollbar {
        display: none; /* hide scrollbar on Chrome/Safari */
    }
    
    /* Ensure the container doesn't force width beyond viewport */
    .second-nav .navbar-collapse.main-menu {
        max-width: 100%;
        overflow: hidden; /* constrain the flex container */
        justify-content: flex-start; /* ensure items start from right (RTL) or left */
    }
    
    /* Ensure the nav itself doesn't cause overflow */
    .second-nav {
        max-width: 100vw;
        overflow-x: hidden; 
    }
}

/* --- Mobile Shop Optimizations --- */
/* Tighter grid for mobile to allow more space for cards */
@media (max-width: 575.98px) {
    .shop-products.row {
        --bs-gutter-x: 10px !important;
    }
    
    .product-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    
    .product-card .prod-thumb {
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    .product-card .prod-name {
        font-size: 14px !important;
    }
    
    .product-card .prod-price {
        font-size: 13px !important;
        padding: 4px 8px !important;
    }
}

/* 1-column grid for very small screens (< 375px) */
@media (max-width: 375.98px) {
    .shop-products .col-6 {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

/* --- Mobile Shop Optimizations --- */
/* Tighter grid for mobile to allow more space for cards */
@media (max-width: 575.98px) {
    .shop-products.row {
        --bs-gutter-x: 10px !important;
    }
    
    .product-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    
    .product-card .prod-thumb {
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    .product-card .prod-name {
        font-size: 14px !important;
    }
    
    .product-card .prod-price {
        font-size: 13px !important;
        padding: 4px 8px !important;
    }
}

/* 1-column grid for sizes under 375px or equal to 375px if desired as "under" is strict, but usually inclusive of problem devices */
@media (max-width: 375.98px) {
    .shop-products .col-6 {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

/* Further reduce grid padding as requested */
@media (max-width: 575.98px) {
    /* Target the columns inside the shop products row specifically to override generic row styles */
    .shop-products.row > * {
		padding-right: calc(var(--bs-gutter-x) * .5) !important;
    	padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}

/* --- About Page Mobile Optimizations --- */
@media (max-width: 767.98px) {
    /* Reset large padding on the story card container */
    .story-card {
        padding: 20px !important;
        margin-bottom: 50px !important;
        border-radius: 16px !important;
    }

    /* Fix image height and spacing */
    .story-image-wrapper {
        min-height: 250px !important;
        margin-bottom: 25px !important;
        border-radius: 12px !important;
    }
    
    /* Reset padding on content column */
    .story-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Typography Adjustments */
    .story-content h3 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
        text-align: center;
    }
    
    .story-content p {
        font-size: 14px !important;
        text-align: justify;
        margin-bottom: 15px !important;
    }

    /* Stats Section Adjustment */
    .story-content .row.mt-5 {
        margin-top: 30px !important;
    }
    
    .story-content .col-6 > div {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 5px !important;
    }

    .story-content .col-6 > div > div:first-child {
        font-size: 28px !important;
    }
    
    .story-content .col-6 > div > div:last-child {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}


@media (max-width: 575.98px) {
    /* Target the columns inside the shop products row specifically to override generic row styles */
    .header-btn .btn-catalog {	
		padding: 9px 9px !important;
	}
}

/* --- Mobile Filter Button Styling --- */
.mobile-filter-btn {
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
}

.mobile-filter-btn:hover,
.mobile-filter-btn:focus,
.mobile-filter-btn:active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.mobile-filter-btn i {
    font-size: 16px;
}

/* --- Mobile Footer Optimizations --- */
@media (max-width: 991.98px) {
    .main-footer {
        padding-top: 60px !important;
        padding-bottom: 20px !important;
        text-align: center;
    }

    .main-footer .footer-header {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
    
    .main-footer .footer-logo {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .footer-social-links {
        justify-content: center !important;
        flex-direction: column;
        gap: 15px;
    }

    .footer-links, .footer-contact-box, .footer-latest-news {
        margin-bottom: 40px;
    }

    .footer-links h3, 
    .footer-contact-box h3, 
    .footer-latest-news h3 {
        margin-bottom: 20px;
        position: relative;
        display: inline-block;
        padding-bottom: 10px;
    }
    
    /* Decoration under title for mobile center alignment */
    .footer-links h3::after, 
    .footer-contact-box h3::after, 
    .footer-latest-news h3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 2px;
        background-color: var(--accent-color);
        border-radius: 2px;
    }

    .footer-contact-item {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .footer-contact-item .icon-box {
        margin-left: 0;
        margin-bottom: 5px;
    }
    
    .footer-contact-content {
        width: 100%;
    }

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

/* --- Mobile Product List Sort Bar Optimizations --- */
@media (max-width: 767.98px) {
    /* Hide product count on mobile */
    .shop-products-count {
        display: none !important;
    }

    /* Optimize Sort Bar Layout */
    .shop-sort-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: 15px !important;
        margin-bottom: 20px !important;
        border-top: 1px solid #f0f0f0;
        padding-top: 15px !important;
        gap: 15px !important;
    }
    
    .shop-sort-bar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Fixed Label */
    .shop-sort-label {
        flex-shrink: 0;
        margin-left: 5px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    
    /* Scrollable Options */
    .shop-sort-options {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: center;
    }
    
    .shop-sort-item {
        white-space: nowrap;
        font-size: 13px !important;
        flex-shrink: 0;
        padding: 5px 12px;
        background: #f5f7f8;
        border-radius: 20px;
        transition: all 0.2s ease;
    }
    
    .shop-sort-item.active {
        background: var(--primary-color);
        color: #fff !important;
        font-weight: 500;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
}

/* --- Mobile Home Page Optimizations --- */
@media (max-width: 767.98px) {

    /* ============================================
       CATEGORIES CARD - Full Mobile Redesign
       ============================================ */

    /* Wrapper: Overlap hero bottom fade zone for seamless transition */
    .categories-card-wrapper {
        position: relative;
        z-index: 5;
        background: #f5f7f6;
        padding: 0 0 24px;
        margin-top: -60px;
    }

    /* Card: strip glass/grid, become a simple white card */
    .categories-card {
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #f5f7f6 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* CTA: Become a nice section header row */
    .categories-cta {
        background: #fff !important;
        color: var(--primary-color) !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #eee !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        text-decoration: none !important;
    }

    .categories-cta i {
        order: unset;
        font-size: 14px !important;
        background: var(--primary-color);
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Categories List: horizontal scroll strip */
    .categories-card .categories-list {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 0 !important;
        padding: 16px 12px !important;
        background: #fff;
        scrollbar-width: none !important;
    }

    .categories-card .categories-list::-webkit-scrollbar {
        display: none !important;
    }

    /* Category items: circular thumb + label */
    .categories-card .categories-list .cat-item {
        flex: 0 0 auto !important;
        min-width: 75px !important;
        max-width: 90px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 6px !important;
        color: var(--primary-color) !important;
        border-radius: 14px !important;
        transition: background 0.2s ease;
    }

    .categories-card .categories-list .cat-item:hover,
    .categories-card .categories-list .cat-item:active {
        background: rgba(25,35,36,0.05) !important;
    }

    .categories-card .categories-list .cat-item .cat-thumb {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: #f0f3f2 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #e8ecea !important;
        flex-shrink: 0 !important;
    }

    .categories-card .categories-list .cat-item .cat-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .categories-card .categories-list .cat-item .cat-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        color: #333 !important;
        font-weight: 500 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    /* Hide the mobile-only marquee rows (not needed with this design) */
    .categories-card .categories-list-rows {
        display: none !important;
    }


    /* Hero Content Optimization */
    .hero-content {
        padding-top: 80px; /* Space for fixed header */
        text-align: center;
    }

    .hero-content h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        opacity: 0.9;
    }

    .hero-content h1 {
        font-size: 24px !important; /* Reduce massive title */
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    /* Hide long description on mobile */
    .hero-content p {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limit strictly to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        padding: 0 10px;
    }

    .hero-btn {
        margin-top: 10px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
    }

    .hero-btn .btn-default {
        width: 100%;
        max-width: 280px;
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
}