/*
TemplateMo 582 Tale SEO Agency - Arabic Version
https://templatemo.com/tm-582-tale-seo-agency
*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
--------------------------------------------- */

/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap");
/* إضافة الخطوط العربية */
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap");

/* تعيين الخط العام */
html, body {
  font-family: 'Tajawal', 'Almarai', sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
}

/* تنسيق العناوين */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Almarai', 'Tajawal', sans-serif;
  line-height: 1.4;
}

/* تنسيق الفقرات */
p {
  font-size: 16px;
  line-height: 1.8;
  text-align: right;
  word-spacing: 2px;
}

/* تنسيق النماذج */
#contact-form input,
#contact-form textarea,
#free-quote input {
  text-align: right;
  direction: rtl;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder,
#free-quote input::placeholder {
  text-align: right;
}

/* 
---------------------------------------------
الألوان الجديدة لـ Sukur Nest
--------------------------------------------- 
*/
:root {
  --primary-bg: #F8F5EF;
  --secondary-color: #6B625A;
  --accent-color: #C6A463;
  --text-color: #6B625A;
  --light-text: #8A7F76;
  --border-color: #E5DFD5;
  --card-bg: #FFFFFF;
}

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Amiri', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl; /* RTL direction for Arabic */
  background-color: var(--primary-bg);
  color: var(--text-color);
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
  color: var(--secondary-color);
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: var(--text-color);
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Tajawal', sans-serif;
  background-color: var(--primary-bg);
  color: var(--text-color);
}

::selection {
  background: var(--accent-color);
  color: #fff;
}

::-moz-selection {
  background: var(--accent-color);
  color: #fff;
}

.templatemo-feature {
  max-width: 66px; 
  border-radius: 50%;
}

.main-button a {
  font-size: 14px;
  color: #fff;
  background-color: var(--accent-color);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.main-button a:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

.second-button a {
  font-size: 14px;
  color: #fff;
  background-color: var(--secondary-color);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.second-button a:hover {
  background-color: var(--accent-color);
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 90px;
}

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

.section-heading .line-dec {
  width: 60px;
  height: 2px;
  margin-bottom: 20px;
  background: var(--secondary-color);
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--accent-color) 100%);
}

.section-heading h2 {
  color: var(--secondary-color);
  font-size: 30px;
  text-transform: capitalize;
  text-decoration: none;
  margin-bottom: 30px;
  line-height: 44px;
}

.section-heading h2 em {
  color: var(--accent-color);
  font-style: normal;
}

.section-heading h2 span {
  color: var(--secondary-color);
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(248, 245, 239, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: var(--accent-color);
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: var(--accent-color);
  border-radius: 50%;
}

/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: var(--primary-bg);
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  background: var(--secondary-color);
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--accent-color) 100%);
  height: 110px;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex;
  flex-direction: row-reverse; /* RTL for nav */
}

.header-area .main-nav .logo {
  margin-top: 25px;
  flex-basis: 20%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  margin-top: 10px;
}

.header-area .main-nav .nav {
  flex-basis: 80%;
  height: 110px;
  margin-top: 0px;
  margin-right: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.nav {
  justify-content: left; /* RTL adjustment */
}

.header-area .main-nav .nav li:first-child {
  padding-right: 60px; /* RTL adjustment */
  padding-left: 0px;
}

.header-area .main-nav .nav li:last-child {
  padding-left: 0px; /* RTL adjustment */
}

.header-area .main-nav .nav li {
  padding-right: 30px; /* RTL adjustment */
  padding-left: 30px;
}

.header-area .main-nav .nav li:nth-child(4) {
  padding-left: 45px !important; /* RTL adjustment */
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  height: 110px;
  line-height: 110px;
  border: transparent;
  letter-spacing: 1px;
}

.background-header .main-nav .nav li a {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .border-button {
  flex-basis: 20%;
  margin-top: 13px;
  text-align: left; /* RTL adjustment */
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-right: 25px !important; /* RTL adjustment */
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff;
  opacity: 0.8;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff;
  opacity: 0.8;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-left: 15px; /* RTL adjustment */
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f104"; /* Changed for RTL */
  font-size: 12px;
  color: #fff;
  position: absolute;
  left: 30px; /* RTL adjustment */
  top: 45px;
}

.background-header .main-nav .nav li.has-sub:after {
  top: 32px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 160px;
  border-radius: 0px 0px 5px 5px;
  background-color: #eee;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 110px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  right: 0; /* RTL adjustment */
  left: auto;
}

.background-header .main-nav .nav li.has-sub ul.sub-menu {
  top: 80px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-right: 0px; /* RTL adjustment */
  padding-right: 0px;
  padding-left: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #eee;
  color: #2a2a2a!important;
  padding-right: 20px; /* RTL adjustment */
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
  text-align: right; /* RTL adjustment */
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  border-bottom: none;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: var(--accent-color)!important;
  padding-right: 25px; /* RTL adjustment */
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  left: 20px; /* RTL adjustment */
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  right: 0; /* RTL adjustment */
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  right: 0; /* RTL adjustment */
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-right: 10px; /* RTL adjustment */
    padding-left: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    right: 30px; /* RTL adjustment */
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    left: 70px; /* RTL adjustment */
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: var(--accent-color)!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: var(--primary-bg);
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-right: 0px; /* RTL adjustment */
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-right: 0px; /* RTL adjustment */
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;

  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;

  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-color);
    padding-right: 0px !important; /* RTL adjustment */
    padding-left: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: var(--primary-bg) !important;
    color: var(--text-color) !important;
    text-align: right; /* RTL adjustment */
  }
  .header-area .main-nav .nav li a:hover {
    background: var(--secondary-color) !important;
    color: var(--accent-color)!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: var(--text-color);
    left: 30px; /* RTL adjustment */
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

.pre-header {
  background-color: var(--primary-bg);
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header .left-info ul li:last-child {
  margin-left: 0px; /* RTL adjustment */
  padding-left: 0px;
  border-left: none; /* RTL adjustment */
}

.pre-header .left-info ul li {
  margin-left: 15px; /* RTL adjustment */
  padding-left: 15px;
  border-left: 1px solid var(--border-color); /* RTL adjustment */
}

.pre-header .left-info ul li a {
  font-size: 14px;
  color: var(--text-color);
}

.pre-header .left-info ul li a i {
  font-size: 18px;
  margin-left: 10px; /* RTL adjustment */
}

.pre-header ul li a {
  color: var(--text-color);
  transition: all .4s;
}

.pre-header .social-icons {
  text-align: left; /* RTL adjustment */
}

.pre-header .social-icons ul li {
  margin-right: 10px; /* RTL adjustment */
}

.pre-header .social-icons ul li a {
  font-size: 18px;
}

.pre-header ul li a:hover {
  color: var(--accent-color);
}

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

.main-banner {
  position: relative;
  padding: 295px 0px 185px 0px;
}

.main-banner:after {
  content: url(../images/banner-right.png);
  top: -1px;
  left: 0; /* RTL adjustment */
  position: absolute;
  width: 861px;
  height: 746px;
  z-index: -1;
}

.main-banner::before {
  content: url(../images/banner-left.png);
  top: -1px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 194px;
  height: 655px;
  z-index: -1;
}

.main-banner h6 {
  font-size: 20px;
  color: var(--accent-color);
  text-transform: uppercase;
  font-weight: 700;
}

.main-banner .line-dec {
  margin: 30px 0px 20px 0px;
  width: 210px;
  height: 2px;
  background-color: var(--secondary-color);
}

.main-banner h4 {
  font-size: 52px;
  color: var(--secondary-color);
  font-weight: 700;
  line-height: 70px;
  margin-bottom: 20px;
}

.main-banner h4 em {
  font-style: normal;
  color: var(--accent-color);
}

.main-banner h4 span {
  color: var(--secondary-color);
}

.main-banner p {
  padding-left: 25%; /* RTL adjustment */
  margin-bottom: 30px;
}

.main-banner .main-button {
  display: inline-block;
}

.main-banner span {
  display: inline-block;
  margin: 0px 10px 0px 10px;
  color: var(--secondary-color);
}

.main-banner .second-button {
  display: inline-block;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

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

.services .section-heading h2 {
  padding-left: 30px; /* RTL adjustment */
}

.services::before {
  content: url(../images/services-left.jpg);
  top: 120px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 844px;
  height: 714px;
  z-index: -1;
}

.services::after {
  content: url(../images/contact-left.jpg);
  bottom: -150px;
  left: 0; /* RTL adjustment */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.services .service-item {
  border: 1px solid var(--border-color);
  border-radius: 23px;
  padding: 30px;
  background-color: var(--card-bg);
  margin-bottom: 30px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 20px;
  color: var(--text-color);
  margin-top: 20px;
  line-height: 30px;
  transition: all .4s;
}

.services .service-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.services .service-item:hover h4 {
  color: var(--accent-color);
}

/* 
---------------------------------------------
Products Style
--------------------------------------------- 
*/
/* 
---------------------------------------------
تعديلات كلاس item مع margin وأسهم التحريك
--------------------------------------------- 
*/

/* زيادة عرض الـ items مع margin */
.owl-features .item {
  padding: 0 15px;
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 300px;
  max-width: 400px;
  flex: 0 0 auto;
  margin: 0 10px; /* إضافة margin left وright */
}

/* تحسينات الحاوية والكاروسيل */
.products .container-fluid {
  padding: 0 15px;
}

.owl-features.owl-carousel {
  padding: 25px 0;
  position: relative; /* مهم لأسهم التحريك */
}

.owl-features .owl-stage-outer {
  padding: 20px 0;
  margin: 0 -10px; /* تعويض الـ margin */
}

.owl-features .owl-stage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.owl-features .owl-item {
  display: flex;
  justify-content: center;
  min-height: 450px;
}

/* بطاقات المنتجات مع margin */
.product-card {
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 25px 20px;
  background-color: var(--card-bg);
  margin: 0;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 100%;
}

.product-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0px 14px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-12px);
}

.product-image {
  height: 250px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 20px;
  flex-shrink: 0;
  width: 100%;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
}

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

.product-card .down-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

.product-card .down-content h4 {
  font-size: 20px;
  color: var(--secondary-color);
  margin-bottom: 18px;
  font-weight: 700;
  line-height: 1.5;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  padding: 0 10px;
  font-family: 'Almarai', 'Tajawal', sans-serif;
}

.product-price {
  font-size: 22px;
  color: var(--accent-color);
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.3;
}

.old-price {
  text-decoration: line-through;
  color: var(--light-text);
  font-size: 18px;
  margin-left: 10px;
}

.add-to-cart {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 28px;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  margin-top: auto;
  box-shadow: 0 6px 18px rgba(198, 164, 99, 0.6);
  line-height: 1.3;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-to-cart:hover {
  background-color: var(--secondary-color);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(107, 98, 90, 0.6);
}

/* أسهم التحريك - إعادة الظهور */
.owl-features .owl-nav {
  display: flex !important;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin-top: 0;
  pointer-events: none;
}

.owl-features .owl-nav button {
  pointer-events: all;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent-color) !important;
  color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.owl-features .owl-nav button:hover {
  background: var(--secondary-color) !important;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.owl-features .owl-nav button span {
  font-size: 24px;
  line-height: 1;
  color: white;
}

.owl-features .owl-nav .owl-prev,
.owl-features .owl-nav .owl-next {
  position: relative;
}

/* تحسينات خاصة للهواتف */
@media (max-width: 767px) {
  .owl-features .item {
    padding: 0 12px;
    min-width: 280px;
    max-width: 350px;
    margin: 0 8px;
  }
  
  .products .container-fluid {
    padding: 0 10px;
  }
  
  .owl-features.owl-carousel {
    padding: 20px 0;
  }
  
  .owl-features .owl-stage-outer {
    padding: 15px 0;
    margin: 0 -8px;
  }
  
  .product-card {
    padding: 20px 18px;
    min-height: 380px;
    border-radius: 18px;
  }
  
  .product-image {
    height: 220px;
    margin-bottom: 18px;
    border-radius: 14px;
  }
  
  .product-card .down-content h4 {
    font-size: 18px;
    min-height: 55px;
    margin-bottom: 16px;
    padding: 0 8px;
  }
  
  .product-price {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  .old-price {
    font-size: 16px;
    margin-left: 8px;
  }
  
  .add-to-cart {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 24px;
    min-height: 48px;
  }
  
  /* تعديل أسهم التحريك على الهواتف */
  .owl-features .owl-nav {
    display: none !important; /* إخفاء الأسهم على الهواتف */
  }
}

/* تحسينات للشاشات الصغيرة جداً */
@media (max-width: 480px) {
  .owl-features .item {
    padding: 0 10px;
    min-width: 260px;
    max-width: 320px;
    margin: 0 6px;
  }
  
  .products .container-fluid {
    padding: 0 8px;
  }
  
  .owl-features.owl-carousel {
    padding: 18px 0;
  }
  
  .owl-features .owl-stage-outer {
    margin: 0 -6px;
  }
  
  .product-card {
    min-height: 360px;
    padding: 18px 16px;
    border-radius: 16px;
  }
  
  .product-image {
    height: 200px;
    border-radius: 12px;
  }
  
  .product-card .down-content h4 {
    font-size: 17px;
    min-height: 50px;
    margin-bottom: 14px;
  }
  
  .product-price {
    font-size: 19px;
    margin-bottom: 14px;
  }
  
  .old-price {
    font-size: 15px;
  }
  
  .add-to-cart {
    padding: 11px 18px;
    font-size: 14px;
    border-radius: 22px;
    min-height: 46px;
  }
}

/* تحسينات للعرض على الشاشات الضيقة */
@media (max-width: 360px) {
  .owl-features .item {
    padding: 0 8px;
    min-width: 240px;
    max-width: 300px;
    margin: 0 5px;
  }
  
  .product-card {
    min-height: 340px;
    padding: 16px 14px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .product-card .down-content h4 {
    font-size: 16px;
    min-height: 45px;
    line-height: 1.4;
  }
  
  .product-price {
    font-size: 18px;
  }
  
  .add-to-cart {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
  }
}

/* تحسينات للشاشات المتوسطة */
@media (min-width: 768px) and (max-width: 1024px) {
  .owl-features .item {
    padding: 0 15px;
    min-width: 320px;
    max-width: 380px;
    margin: 0 12px;
  }
  
  .owl-features .owl-stage-outer {
    margin: 0 -12px;
  }
  
  .product-card {
    min-height: 420px;
    padding: 24px 22px;
  }
  
  .product-image {
    height: 260px;
  }
  
  .product-card .down-content h4 {
    font-size: 21px;
    min-height: 65px;
  }
  
  .product-price {
    font-size: 23px;
  }
  
  /* أسهم التحريك على الأجهزة اللوحية */
  .owl-features .owl-nav button {
    width: 45px;
    height: 45px;
    margin: 0 15px;
  }
  
  .owl-features .owl-nav button span {
    font-size: 22px;
  }
}

/* تحسينات للشاشات الكبيرة */
@media (min-width: 1200px) {
  .owl-features .item {
    padding: 0 18px;
    min-width: 340px;
    max-width: 400px;
    margin: 0 15px;
  }
  
  .owl-features .owl-stage-outer {
    margin: 0 -15px;
  }
  
  .product-card {
    min-height: 440px;
    padding: 26px 24px;
  }
  
  .product-image {
    height: 280px;
  }
  
  .product-card .down-content h4 {
    font-size: 22px;
    min-height: 70px;
  }
  
  .product-price {
    font-size: 24px;
  }
  
  /* أسهم التحريك على الشاشات الكبيرة */
  .owl-features .owl-nav button {
    width: 55px;
    height: 55px;
    margin: 0 25px;
  }
  
  .owl-features .owl-nav button span {
    font-size: 26px;
  }
}

/* تحسينات النقاط */
.owl-features .owl-dots {
  margin-top: 30px;
  text-align: center;
}

.owl-features .owl-dot span {
  width: 14px;
  height: 14px;
  margin: 8px 6px;
  background: var(--border-color);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.owl-features .owl-dot.active span {
  background: var(--accent-color);
  transform: scale(1.2);
}

/* تأكد من أن البطاقات تظهر بشكل مركزي */
.products .container-fluid .row .col-lg-12 {
  display: flex;
  justify-content: center;
}

/* 
---------------------------------------------
Projects Style
--------------------------------------------- 
*/

.projects .section-heading {
  margin-bottom: 80px;
}

.projects .container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

.projects .item {
  border-radius: 23px;
  overflow: hidden;
}

.projects .item .down-content {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0px 0px 23px 23px;
  padding: 30px;
  position: relative;
}

.projects .item .down-content h4 {
  font-size: 20px;
  color: var(--text-color);
  line-height: 30px;
  width: 75%;
}

.projects .item .down-content a {
  width: 46px;
  height: 46px;
  display: inline-block;
  line-height: 46px;
  text-align: center;
  background-color: var(--card-bg);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  position: absolute;
  left: 30px; /* RTL adjustment */
  top: 50%;
  color: var(--accent-color);
  transform: translateY(-23px);
}

.projects .owl-nav {
  position: absolute;
  max-width: 1320px;
  top: -126px;
  left: 16%; /* RTL adjustment */
  text-align: left; /* RTL adjustment */
}

.projects .owl-nav .owl-prev span,
.projects .owl-nav .owl-next span {
  width: 46px;
  height: 46px;
  line-height: 42px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: var(--accent-color);
  border-radius: 50%;
  opacity: 0.5;
  transition: all .3s;
}

.projects .owl-nav .owl-next span {
  margin-right: 15px; /* RTL adjustment */
}

.projects .owl-nav .owl-prev span:hover,
.projects .owl-nav .owl-next span:hover {
  opacity: 1;
}

/* 
---------------------------------------------
Infos Style
--------------------------------------------- 
*/

.infos {
  background-image: url(../images/infos-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 120px 0px;
  margin-top: 120px;
}

.infos .main-content {
  overflow: hidden;
  background-color: var(--card-bg);
  border-radius: 23px;
}

.infos .main-content .left-image {
  background-image: url(../images/left-infos.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}

.infos .main-content .left-image img {
  display: none;
}

.infos .main-content .section-heading {
  padding: 60px 60px 30px 60px;
}

.infos .main-content .skills {
  padding: 0px 60px;
}

.infos .main-content .skill-slide {
  position: relative;
  width: 100%;
  background-color: var(--border-color);
  height: 10px;
  border-radius: 5px;
  margin-bottom: 60px;
}

.infos .main-content .skill-slide .fill {
  height: 10px;
  background-color: var(--accent-color);
  border-radius: 5px;
}

.infos .main-content .skill-slide h6 {
  position: absolute;
  color: var(--accent-color);
  font-size: 15px;
  right: 0; /* RTL adjustment */
  top: -25px;
}

.infos .main-content .skill-slide span {
  position: absolute;
  color: var(--accent-color);
  font-size: 15px;
  font-weight: 700;
  top: -25px;
  left: 0; /* RTL adjustment */
}

.infos .main-content .marketing .fill {
  width: 90%;
}

.infos .main-content .digital .fill {
  width: 80%;
}

.infos .main-content .media .fill {
  width: 95%;
}

.infos .main-content .marketing span {
  left: 10%; /* RTL adjustment */
}

.infos .main-content .digital span {
  left: 20%; /* RTL adjustment */
}

.infos .main-content .media span {
  left: 5%; /* RTL adjustment */
}

.infos .main-content p.more-info {
  margin-top: -15px;
  padding: 0px 60px 60px 60px;
}

/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  position: relative;
}

.contact-us::before {
  content: url(../images/contact-left.jpg);
  top: -60px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.contact-us::after {
  content: url(../images/contact-left.jpg);
  bottom: -90px;
  left: 0; /* RTL adjustment */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.contact-us .contact-us-content {
  border-radius: 23px;
  padding: 60px;
  background-color: var(--card-bg);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
}

.contact-us .contact-us-content #contact-form {
  padding: 60px;
  border-radius: 23px 23px 0px 0px;
  border: 1px solid var(--border-color);
}

#contact-form .section-heading {
  text-align: center;
}

#contact-form input {
  width: 100%;
  height: 46px;
  border-radius: 23px;
  background-color: var(--primary-bg);
  border: none;
  outline: none;
  padding: 0px 15px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 15px;
  text-align: right; /* RTL adjustment */
}

#contact-form input::placeholder {
  color: var(--text-color);
  text-align: right; /* RTL adjustment */
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 23px;
  background-color: var(--primary-bg);
  border: none;
  outline: none;
  padding: 15px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 15px;
  text-align: right; /* RTL adjustment */
}

#contact-form textarea::placeholder {
  color: var(--text-color);
  text-align: right; /* RTL adjustment */
}

#contact-form button {
  border: none;
  height: 46px;
  background-color: var(--accent-color);
  width: 100%;
  border-radius: 23px;
  color: #fff;
  transition: all .4s;
}

#contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .more-info {
  text-align: center;
  background: var(--secondary-color);
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--accent-color) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

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

footer p {
  text-align: center;
  padding: 30px 0px;
  color: var(--text-color);
  font-weight: 500;
}

footer p a {
  color: var(--text-color);
  transition: all .3s;
}

footer p a:hover {
  color: var(--accent-color);
}

/* 
---------------------------------------------
Page Heading Style
--------------------------------------------- 
*/

.page-heading {
  padding: 120px 0px;
  margin-top: 110px;
}

.page-heading::before {
  content: url(../images/banner-left.png);
  top: -1px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 194px;
  height: 655px;
  z-index: -1;
}

.page-heading h6 {
  font-size: 20px;
  color: var(--accent-color);
  text-transform: uppercase;
  font-weight: 700;
}

.page-heading .line-dec {
  margin: 30px 0px 20px 0px;
  width: 210px;
  height: 2px;
  background-color: var(--secondary-color);
}

.page-heading h4 {
  font-size: 52px;
  color: var(--secondary-color);
  font-weight: 700;
  line-height: 70px;
  margin-bottom: 20px;
}

.page-heading h4 em {
  font-style: normal;
  color: var(--accent-color);
}

.page-heading h4 span {
  color: var(--secondary-color);
}

.page-heading p {
  padding-left: 25%; /* RTL adjustment */
  margin-bottom: 30px;
}

.page-heading .main-button {
  display: inline-block;
}

.page-heading span {
  display: inline-block;
  margin: 0px 10px 0px 10px;
  color: var(--secondary-color);
}

.page-heading .second-button {
  display: inline-block;
}

/* 
---------------------------------------------
Infos Style
--------------------------------------------- 
*/

.video-info {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-bottom: 60px;
}

.video-info .video-thumb {
  position: relative;
  border-radius: 23px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
  margin-top: -60px;
}

.video-info .video-thumb a {
  position: absolute;
  right: 50%; /* RTL adjustment */
  top: 50%;
  transform: translate(23px, -23px); /* RTL adjustment */
  background-color: #fff;
  border-radius: 50%;
  color: var(--accent-color);
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 46px;
  line-height: 46px;
}

.video-info .section-heading {
  padding: 60px 15px 30px 15px;
}

.video-info .section-heading h2 {
  color: var(--secondary-color);
  padding-left: 30px; /* RTL adjustment */
}

.video-info .section-heading .line-dec {
  background: var(--secondary-color);
}

.video-info .section-heading p {
  color: var(--text-color);
}

.video-info .skills {
  padding: 0px 15px;
}

.video-info .skill-slide {
  position: relative;
  width: 100%;
  background-color: rgba(107, 98, 90, 0.1);
  height: 10px;
  border-radius: 5px;
  margin-bottom: 60px;
}

.video-info .skill-slide .fill {
  height: 10px;
  background-color: var(--accent-color);
  border-radius: 5px;
}

.video-info .skill-slide h6 {
  position: absolute;
  color: var(--secondary-color);
  font-size: 15px;
  right: 0; /* RTL adjustment */
  top: -25px;
}

.video-info .skill-slide span {
  position: absolute;
  color: var(--secondary-color);
  font-size: 15px;
  font-weight: 700;
  top: -25px;
  left: 0; /* RTL adjustment */
}

.video-info .marketing .fill {
  width: 90%;
}

.video-info .digital .fill {
  width: 80%;
}

.video-info .media .fill {
  width: 95%;
}

.video-info .marketing span {
  left: 10%; /* RTL adjustment */
}

.video-info .digital span {
  left: 20%; /* RTL adjustment */
}

.video-info .media span {
  left: 5%; /* RTL adjustment */
}

/*
---------------------------------------------
Happy Clients Style
---------------------------------------------
*/

.happy-clients {
  position: relative;
}

.happy-clients::before {
  content: url(../images/contact-left.jpg);
  top: -60px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.happy-clients::after {
  content: url(../images/contact-left.jpg);
  bottom: -90px;
  left: 0; /* RTL adjustment */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.happy-clients .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.happy-clients .section-heading .line-dec {
  margin: 0 auto 20px auto;
}

.happy-clients .naccs {
  position: relative;
  overflow: hidden;
}

.happy-clients .naccs .menu {
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  padding: 25px 0px;
  border-radius: 23px;
  margin-bottom: 60px;
}

.happy-clients .naccs .menu div {
  border-left: 1px solid var(--border-color); /* RTL adjustment */
  width: 24.6%;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  cursor: pointer;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.happy-clients .naccs .menu div.last-item {
  border-left: none; /* RTL adjustment */
}

.happy-clients .naccs .menu div.active {
  color: var(--accent-color);
}

.happy-clients ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.happy-clients ul.nacc li {
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.happy-clients ul.nacc li img {
  padding-right: 45px; /* RTL adjustment */
}

.happy-clients ul.nacc li h4 {
  font-size: 30px;
  color: var(--text-color);
  margin-bottom: 25px;
}

.happy-clients ul.nacc li .line-dec {
  background-color: var(--accent-color);
  width: 60px;
  height: 2px;
  margin-bottom: 25px;
}

.happy-clients ul.nacc li .info {
  margin-top: 30px;
}

.happy-clients ul.nacc li .info span {
  display: inline-block;
  background-color: var(--accent-color);
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  padding: 0px 20px;
  margin-left: 20px; /* RTL adjustment */
  margin-bottom: 30px;
}

.happy-clients ul.nacc li .info span.last-span {
  margin-left: 0px; /* RTL adjustment */
}

.happy-clients ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

/*
---------------------------------------------
CTA Style
---------------------------------------------
*/

.cta {
  background-image: url(../images/cta-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 80px 0px;
  position: relative;
  z-index: 15;
  margin-top: 120px;
}

.cta h4 {
  font-size: 30px;
  color: var(--secondary-color);
  line-height: 44px;
}

.cta .main-button {
  text-align: left; /* RTL adjustment */
}

.cta .main-button a {
  background-color: var(--accent-color);
  color: white;
  margin-top: 30px;
}

/*
---------------------------------------------
Happy Steps Style
---------------------------------------------
*/

.happy-steps {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 80px 0px;
}

.happy-steps h2 {
  font-size: 30px;
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: 60px;
}

.happy-steps .steps {
  background-color: rgba(248, 245, 239, 0.2);
  padding: 30px;
  border-radius: 23px;
}

.happy-steps .steps .item {
  text-align: center;
  border-left: 1px solid rgba(107, 98, 90, 0.2); /* RTL adjustment */
  margin-left: -15px; /* RTL adjustment */
}

.happy-steps .steps .last-item {
  border-left: none; /* RTL adjustment */
  margin-left: 0px; /* RTL adjustment */
}

.happy-steps .steps .item h4 {
  font-size: 20px;
  color: var(--secondary-color);
  margin-top: 15px;
}

/* 
---------------------------------------------
Most Asked Style
--------------------------------------------- 
*/

.most-asked {
  position: relative;
}

.most-asked::before {
  content: url(../images/contact-left.jpg);
  top: -60px;
  right: 0; /* RTL adjustment */
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.most-asked::after {
  content: url(../images/contact-left.jpg);
  bottom: -90px;
  left: 0; /* RTL adjustment */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: absolute;
  width: 103px;
  height: 464px;
  z-index: -1;
}

.most-asked .section-heading {
  margin-bottom: 80px;
}

.most-asked .accordions .accordion {
  border-bottom: 1px solid var(--border-color);
}

.most-asked .accordions .last-accordion {
  border-bottom: none;
}

.most-asked .accordion-head {
  padding: 35px 0px !important;  
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  cursor: pointer;
  transition: color 200ms ease-in-out;
  text-align: right; /* RTL adjustment */
}

@media screen and (min-width: 768px) {
  .most-asked .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.most-asked .accordion-head .icon {
  float: left; /* RTL adjustment */
  transition: transform 200ms ease-in-out;
}

.most-asked .accordion-head.is-open {
  color: var(--accent-color);
  border-bottom: none;
}

.most-asked .accordion-head.is-open .icon {
  transform: rotate(45deg);
}

.most-asked .accordion-body {
  padding: 0px;
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid var(--primary-bg);
  text-align: right; /* RTL adjustment */
}

.most-asked .accordion-body > .content p {
  padding: 0px 0px 30px 0px;
  padding-top: 0;
}

.most-asked #free-quote {
  border-radius: 23px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
  padding: 60px;
  margin-right: 45px; /* RTL adjustment */
  background-color: var(--card-bg);
}

#free-quote .section-heading {
  margin-bottom: 40px;
}

#free-quote input {
  width: 100%;
  height: 46px;
  border-radius: 23px;
  background-color: var(--primary-bg);
  border: none;
  outline: none;
  padding: 0px 15px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 15px;
  text-align: right; /* RTL adjustment */
}

#free-quote input::placeholder {
  color: var(--text-color);
  text-align: right; /* RTL adjustment */
}

#free-quote button {
  border: none;
  height: 46px;
  background-color: var(--accent-color);
  width: 100%;
  border-radius: 23px;
  color: #fff;
  transition: all .4s;
}

#free-quote button:hover {
  opacity: 0.8;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

/* Floating Contact Button */
.floating-contact {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 999;
}

.contact-btn {
  background-color: var(--accent-color);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.contact-btn i {
  font-size: 24px;
  margin-bottom: 5px;
}

.contact-btn span {
  font-size: 12px;
  font-weight: 500;
}

.contact-options {
  position: absolute;
  bottom: 70px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.contact-options.active {
  opacity: 1;
  visibility: visible;
}

.option-btn {
  background-color: var(--secondary-color);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.option-btn i {
  font-size: 20px;
  margin-bottom: 5px;
}

.option-btn span {
  font-size: 10px;
}

.contact-btn:hover, .option-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RTL Adjustments */
html[dir="rtl"] .floating-contact {
  left: auto;
  right: 30px;
}

html[dir="rtl"] .contact-options {
  left: auto;
  right: 0;
}

@media (max-width: 767px) {
  .pre-header {
    display: none;
  }
  .header-area {
    top: 0px;
    background-color: var(--secondary-color);
  }
  .main-banner {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li:nth-child(4) {
    padding-left: 0px !important; /* RTL adjustment */
  }
  .header-area .main-nav .nav li {
    background: var(--primary-bg);
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  .main-banner  {
    padding: 185px 0px;
  }
  .main-banner h4 {
    font-size: 36px;
    line-height: 44px;
  }
  .main-banner span {
    margin: 0px 3px 0px 3px;
  }
  .main-banner .main-button a,
  .main-banner .second-button a {
    padding: 12px 20px;
  }
  .projects .item .down-content {
    padding: 25px 15px 15px 15px;
  }
  .projects .item .down-content h4 {
    text-align: center;
    width: 100%;
    font-size: 18px;
  }
  .projects .item .down-content a {
    top: 0;
    left: auto;
    right: 50%; /* RTL adjustment */
    transform: translate(23px, -23px); /* RTL adjustment */
  }
}

@media (max-width: 992px) {
  .pre-header .left-info ul li {
    padding-left: 10px; /* RTL adjustment */
    margin-left: 10px;
  }
  .pre-header .left-info ul li a {
    font-size: 13px;
  }
  .main-banner .caption {
    padding: 30px !important;
    text-align: center;
  }
  .main-banner p {
    padding-left: 0%; /* RTL adjustment */
  }
  .main-banner .line-dec {
    margin: 30px auto 20px auto;
  }
  .projects .owl-nav {
    text-align: center;
    left: auto; /* RTL adjustment */
    top: -70px;
    right: 50%; /* RTL adjustment */
    transform: translateX(50%); /* RTL adjustment */
  }
  .projects .section-heading {
    text-align: center;
  }
  .projects .section-heading .line-dec {
    margin: 0px auto 20px auto;
  }
  .infos .main-content .left-image img {
    display: inline-block;
  }
  .contact-us .contact-us-content,
  .contact-us .contact-us-content #contact-form {
    padding: 30px;
  }
  .contact-us #map {
    margin-bottom: 30px;
  }
  .contact-us-content .more-info .info-item {
    margin-bottom: 45px;
  }
  .page-heading img {
    margin-top: 45px;
  }
  .video-info .section-heading {
    padding: 60px 0px 30px 0px;
  }
  .video-info .skills {
    padding: 0px;
  }
  .happy-clients .naccs .menu div {
    width: 100% !important;
    margin: 15px 0px;
    border-left: none !important; /* RTL adjustment */
  }
  .happy-clients .naccs .menu {
    padding: 15px;
  }
  .happy-clients ul.nacc li img {
    padding-right: 0px; /* RTL adjustment */
    margin-top: 45px;
  }
  .cta h4,
  .cta .main-button {
    text-align: center;
  }
  .happy-steps .steps .item {
    margin-left: 0px; /* RTL adjustment */
    border-left: none; /* RTL adjustment */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(107, 98, 90, 0.2);;
  }
  .happy-steps .steps .last-item {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  .most-asked #free-quote {
    margin-right: 0px; /* RTL adjustment */
    margin-top: 45px;
    padding: 30px;
  }
}

@media (max-width: 1000px) {
  .happy-clients .naccs .menu div {
    width: 24.5%;
    font-size: 15px;
    border-left: none; /* RTL adjustment */
  }
}

@media (max-width: 1200px) {
  .services::before {
    top: 60%;
    transform: translateY(-50%);
  }
}

@media (max-width: 1400px) {
  .main-banner .caption {
    background-color: rgba(248, 245, 239, 0.95);
    padding: 60px;
    border-radius: 23px;
  }
}

/* SEO Enhancements */
/* Schema.org microdata support */
[itemscope] {
  display: block;
}

[itemprop] {
  display: inline;
}

/* Improved accessibility for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Better focus states for keyboard navigation */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }
  
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr, img {
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  @page {
    margin: 0.5cm;
  }
  
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2, h3 {
    page-break-after: avoid;
  }
}

/* تحسينات للهواتف المحمولة وتعزيز SEO */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* تحسينات للطباعة */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a, a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr, img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3 {
    page-break-after: avoid;
  }
}

/* تحسينات الوصول وإمكانية الاستخدام */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* تحسينات الصور لتحميل أسرع */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

.lazy-load {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lazy-loaded {
  opacity: 1;
}

/* تحسينات النصوص للقراءة */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* تحسينات خاصة بالهواتف المحمولة */
@media (max-width: 767px) {
  /* تعديلات الهيدر */
  .header-area {
    height: auto !important;
    padding: 10px 0 !important;
    position: relative !important;
  }
  
  .background-header {
    height: 60px !important;
  }
  
  .header-area .main-nav .logo {
    margin-top: 10px !important;
    max-height: 40px;
  }
  
  /* تعديلات البانر الرئيسي */
  .main-banner {
    padding: 120px 0 80px 0 !important;
  }
  
  .main-banner h4 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  
  .main-banner p {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* تعديلات عامة للمحتوى */
  .section {
    margin-top: 40px !important;
    padding-top: 15px !important;
  }
  
  .section-heading h2 {
    font-size: 24px !important;
  }
  
  /* تعديلات البطاقات والعناصر */
  .service-item, 
  .projects .item, 
  .contact-us-content,
  .infos .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 20px !important;
  }
  
  /* تعديلات النصوص */
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  h4 { font-size: 18px !important; }
  
  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  
  /* تعديلات النماذج */
  #contact-form,
  #free-quote {
    padding: 20px !important;
  }
  
  #contact-form input, 
  #contact-form textarea,
  #free-quote input {
    width: 100% !important;
    font-size: 16px !important;
  }
  
  /* تعديلات القوائم */
  .header-area .main-nav .nav li {
    padding: 5px 0 !important;
  }
  
  .header-area .main-nav .nav li a {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 10px 15px !important;
  }
  
  /* تحسين الأزرار */
  .main-button a, 
  .second-button a {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* تحسينات للشاشات المتوسطة */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-banner {
    padding: 180px 0 120px 0 !important;
  }
  
  .main-banner h4 {
    font-size: 36px !important;
  }
  
  .service-item, 
  .projects .item {
    margin-bottom: 20px !important;
  }
}

/* تحسينات لسرعة التحميل */
.defer-load {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.defer-loaded {
  opacity: 1;
}

.loading-indicator {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f1f1f1;
  z-index: 9999;
}

.loading-indicator .progress {
  height: 100%;
  background-color: var(--accent-color);
  width: 0%;
  transition: width 0.3s ease;
}

/* تحسينات للفيديو */
video {
  max-width: 100%;
  height: auto;
}

/* تحسينات لـ Schema.org */
[itemscope] {
  display: block;
}

[itemprop] {
  display: inline;
}

/* تحسينات للروابط الداخلية */
.internal-link {
  font-weight: 500;
  color: var(--accent-color);
  border-bottom: 1px dotted var(--accent-color);
}

/* تحسينات للبحث */
.search-highlight {
  background-color: #FFF8E1;
  padding: 0 2px;
}

/* تحسينات للشبكات الاجتماعية */
.social-share {
  transition: transform 0.3s ease;
}

.social-share:hover {
  transform: translateY(-3px);
}

/* تحسينات للرسائل */
.alert-message {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.alert-success {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.alert-info {
  background-color: #E3F2FD;
  color: #1565C0;
}

/* تحسينات للجداول */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th, table td {
  padding: 12px 15px;
  text-align: right;
  border-bottom: 1px solid #ddd;
}

table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* تحسينات للقوائم */
ul, ol {
  padding-right: 20px;
  margin-bottom: 20px;
}

li {
  margin-bottom: 8px;
}

/* تحسينات للاقتباسات */
blockquote {
  border-right: 4px solid var(--accent-color);
  padding: 15px 20px;
  margin: 0 0 20px;
  background-color: #f9f9f9;
  font-style: italic;
}

/* تحسينات للشفرات البرمجية */
pre, code {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  padding: 15px;
  overflow-x: auto;
}

/* تحسينات للعرض الداكن */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  
  table th, table td {
    border-bottom-color: #444;
  }
  
  table th {
    background-color: #222;
  }
  
  blockquote {
    background-color: #222;
  }
  
  pre, code {
    background-color: #333;
    color: #f0f0f0;
  }
}
/* تنسيقات صفحة الأقسام */
.categories-section {
    padding: 80px 0;
}

.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-color);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.category-content {
    background: white;
}

.faq-section {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 15px;
    margin-top: 50px;
}

.accordion-button {
    background: white;
    color: var(--secondary-color);
    font-weight: 600;
    border: 1px solid #e9ecef;
}

.accordion-button:not(.collapsed) {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.section-badge {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}

/* تحسينات للعرض على الجوال */
@media (max-width: 768px) {
    .category-image {
        height: 200px;
    }
    
    .categories-section {
        padding: 40px 0;
    }
    
    .faq-section {
        padding: 20px;
    }
}