/*
  Theme Name: eBusiness
  Theme URL: https://bootstrapmade.com/ebusiness-bootstrap-corporate-template/
  Author: BootstrapMade.com
  License: https://bootstrapmade.com/license/
*/

/*-----------------------------------------------------------------------------------
   CSS INDEX
  ===================

  1. Theme Default CSS (body, link color, section etc)
  2. Header Area
   2.1 Stick menu Area
  3. About Area
  4.Services Area
  5.Skill Area
  6.Faq Area
  7.Wellcome Area
  8.Team Area
  9.Review Area
  10.Portfolio Area
  11. Pricing Table
  12. Testimonials area
  13. Review Area
  14. Quote area
  15.Footer Area
  16.Home Page-2 Area
  17.Home Page 3  CSS
  18.Blog CSS
  17.Blog Details CSS

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/

html, body {
  height: 100%;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}

.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

a:focus {
  outline: 0px solid;
}

img {
  max-width: 100%;
  height: auto;
}

.fix {
  overflow: hidden;
}

p {
  margin: 0 0 15px;
  color: #444;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  margin: 0 0 15px;
  color: #d6d6d6;
  font-weight: 500;
}

h1 {
  font-size: 48px;
  line-height: 50px;
}

h2 {
  font-size: 38px;
  line-height: 40px;
}

h3 {
  font-size: 30px;
  line-height: 32px;
}

h4 {
  font-size: 24px;
  line-height: 26px;
}

h5 {
  font-size: 20px;
  line-height: 22px;
}

h6 {
  font-size: 16px;
  line-height: 20px;
}

a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

a:hover {
  color: #852508;
  text-decoration: none;
}

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

body {
  background: #fff none repeat scroll 0 0;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  text-align: left;
  overflow-x: hidden;
  line-height: 22px;
  margin: 0 !important;   /* هذا السطر مهم لإزالة الهامش الافتراضي */
  padding: 0 !important;  /* هذا السطر للتأكد من عدم وجود أي حشو افتراضي */
}


/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: #852508;
  color: #fff;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: #852508;
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #852508;
  color: #fff;
}

.clear {
  clear: both;
}

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

input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {
  -moz-appearance: none;
  box-shadow: none !important;
}

div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff; /* الخلفية البيضاء */
  background-image: url('../img/load.gif'); /* صورة الـ GIF */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40% auto; /* أو النسبة المئوية التي اخترتها لتصغير الـ GIF */
  /* هنا نحدد مدة التلاشي لتكون 1 ثانية */
  transition: opacity 1s ease-out; /* تغيير من 0.5s إلى 1s */
}

/*
::-moz-selection {
  background: #852508;
  text-shadow: none;
}

::selection {
  background: #852508;
  text-shadow: none;
}
*/

.area-padding {
  padding: 100px 0px 30px;
}

.area-padding-2 {
  padding: 70px 0px 50px;
}

.padding-2 {
  padding-bottom: 90px;
}

.section-headline h2 {
  display: inline-block;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 70px;
  position: relative;
  text-transform: capitalize;
}

.section-headline h2::after {
  border: 1px solid #333;
  bottom: -20px;
  content: "";
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 40%;
}

.sec-head {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 0;
  padding: 0 0 10px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}

/*--------------------------------*/

/*  2. Header top Area
/*--------------------------------*/

.header-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.40);
  z-index: 9;
}

.navbar-header a.navbar-brand {
  display: inline-block;
  height: 70px;
  padding: 10px 0;
}

.main-menu ul.navbar-nav li {
  display: inline-block;
  padding: 0px 13px;
}

.main-menu ul.navbar-nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 24px 0px;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.main-menu ul.navbar-nav li.active > a::after {
  border: 1px solid #fff;
  bottom: 0px;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
}

.main-menu ul.navbar-nav li.active a:hover {
  background: none;
  color: #fff;
}

.main-menu ul.navbar-nav li.active a:focus {
  color: #fff;
}

.main-menu ul.navbar-nav li.active a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  position: relative;
}

.main-menu ul.navbar-nav li a:hover {
  color: #852508;
}

.navbar {
  border: medium none;
  margin-bottom: 0;
}

.navbar-default {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.main-menu ul.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
  background: none;
  color: #333;
}

.navbar-default .navbar-toggle {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  border-radius: 0;
  padding: 25px 0px;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
  background-color: transparent;
  color: #fff;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background: none;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
}

.top-right.text-right {
  float: right;
  position: relative;
  top: 24px;
  margin-left: 20px;
}

.top-right.text-right>li {
  float: right;
  margin: 0px 8px;
}

.top-right.text-right li a {
  color: #fff;
}

.main-menu .dropdown ul {
  background: #000;
}

.main-menu .dropdown ul li {
  display: block;
}

/*--------------------------------*/

/* 2.1. Stick menu
/*--------------------------------*/

.header-area.stick {
  background-color: rgba(0, 0, 0, 1);
  height: 70px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.stick .navbar-header a.navbar-brand {
  display: inline-block;
  height: 90px;
}

.stick .navbar-brand>img {
  display: none;
}

.stick .navbar-brand.sticky-logo>img {
  display: block;
}

.sticky-logo h1 {
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}

.sticky-logo h1 span {
  color: #852508;
}
.stick .main-menu ul.navbar-nav li.active > a::after {
  border: 1px solid #fff;
  bottom: 0px;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
}

.stick .main-menu ul.nav>li>a:hover {
  color: #fff;
}

.stick .main-menu ul.navbar-nav li.active a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  position: relative;
}

.stick .mainmenu ul#nav>li:hover>a, .stick .mainmenu ul#nav li .mega-menu, .stick .mainmenu ul#nav li ul.sub-menu {
  background-color: #f5f5f5;
  color: #fff;
  outline: medium none;
}

.stick .mainmenu ul#nav li:hover ul.sub-menu li a:hover, .mainmenu ul#nav li .mega-menu span>a:hover, .stick .mainmenu ul#nav li .mega-menu-shop a.mega-menu-title:hover {
  color: #fff;
}

.stick .logo {
  height: 20px;
}

.stick .logo a {
  margin-top: 0px;
}

.stick .main-menu ul.nav>li>a {
  color: #fff;
  line-height: 22px;
  padding: 24px 0px;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.stick .navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
}

.stick .navbar-default .navbar-toggle {
  padding: 10px 0px;
}

/*------------------------------
  3. About Area
--------------------------------*/

.about-area {
  background-color: #f9f9f9;
}

.single-well>a {
  display: block;
}

.single-well ul li {
  color: #444;
  display: block;
  padding: 5px 0;
}

.single-well ul li i {
  color: #852508;
  padding-right: 10px;
  font-size: 12px;
}

.single-well p {
  color: #444;
}

/*--------------------------------*/

/* 4.Services Area
/*--------------------------------*/

.services-icon {
  color: #444;
  display: inline-block;
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 20px;
}

.section-headline.services-head>h2 {
  margin-bottom: 25px;
}

.services-details {
  padding-top: 40px;
  transition: all 0.5s ease 0s;
}

.services-details:hover h4, .services-details:hover .services-icon {
  color: #852508;
}

.row.second-row {
  margin-top: 40px;
}

.section-head>h2 {
  color: #333;
}

.single-services>h4 {
  color: #444;
  font-size: 24px;
  font-weight: 500;
}

.single-services>p {
  color: #333;
  font-size: 14px;
}

/*----------------------------------------
  5.Skill Area
----------------------------------------*/

.our-skill-area {
  position: relative;
}

.our-skill-area {
  background: rgba(248, 248, 248, 0.8) url("../img/background/bg1.jpg") no-repeat fixed center top / cover;
}

.test-overly {
  background: rgba(0, 0, 0, 0.80);
  position: absolute;
  width: 100%;
  height: 100%;
}

.progress-h4 {
  color: #fff;
  font-weight: 500;
}

/*----------------------------------------
  6.Faq Area
----------------------------------------*/

.faq-details .panel-heading {
  padding: 0;
}

.panel-default>.panel-heading {
  background-color: transparent;
  border: medium none;
  color: #333;
}

.faq-details h4.check-title a {
  color: #333;
  display: block;
  font-weight: 700;
  letter-spacing: 2px;
  margin-left: 40px;
  padding: 6px 10px;
  text-decoration: none;
}

.panel-body {
  padding: 15px 15px 0px 50px;
}

.faq-details h4.check-title {
  color: #444;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0;
}

.faq-details a span.acc-icons {
  position: relative;
}

.faq-details a span.acc-icons::before {
  color: #333;
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.faq-details h4.check-title a.active, .faq-details a.active span.acc-icons::before {
  color: #852508;
}

.faq-details a.active span.acc-icons::before {
  content: "";
  font-family: fontawesome;
  font-size: 24px;
  height: 40px;
  left: -51px;
  line-height: 39px;
  position: absolute;
  text-align: center;
  top: -10px;
  width: 42px;
}

.second-row {
  margin-top: 30px;
}

.event-content.head-team h4 {
  background: transparent none repeat scroll 0 0;
  color: #333;
  padding: 30px 0 10px;
  font-weight: 500;
  text-transform: capitalize;
}

.tab-menu .nav-tabs>li>a:hover {
  border-color: #eee #eee #ddd;
}

.tab-menu {
  display: block;
  text-align: center;
}

.tab-menu ul.nav {
  margin: 0;
  padding: 0;
}

.tab-menu ul.nav li {
  border: medium none;
  display: inline-block;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 0 15px 15px;
}

.tab-menu ul.nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-radius: 0;
  color: #444;
  display: block;
  font-weight: 500;
  margin-right: 5px;
  padding: 10px 20px;
  font-family: raleway;
  font-size: 18px;
}

.tab-menu ul li.active a, .tab-menu ul li.hover a, .tab-menu ul li.focus a {
  border-bottom: 1px solid #fff;
  color: #852508 !important;
}

.tab-menu .nav-tabs {
  border-bottom: none;
}

.tab-main-img a {
  position: relative;
  display: block;
}

.tab-main-img a:hover span.events-offer {
  height: 20%;
}

.tab-main-img a span.events-offer {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  content: "";
  font-size: 20px;
  font-weight: 700;
  height: 0%;
  left: 0;
  line-height: 70px;
  padding: 0;
  position: absolute;
  text-align: left;
  transition: all 0.5s ease 0s;
  width: 100%;
  padding: 0px 10px;
}

/*----------------------------------------
 7.Wellcome Area Css
----------------------------------------*/

.wellcome-area {
  background: rgba(248, 248, 248, 0.8) url("../img/background/bg1.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.well-bg {
  position: relative;
}

.wellcome-text {
  margin: 70px 0;
  padding: 30px 40px;
}

.well-text>h2 {
  color: #fff;
  font-size: 44px;
  font-weight: 500;
  line-height: 50px;
}

.well-text p {
  font-size: 18px;
  font-style: italic;
  color: #fff;
}

.wellcome-text .section-headline p {
  margin-bottom: 0;
}

.subs-feilds {
  border: 1px solid #fff;
  display: inline-block;
  height: 52px;
  margin-top: 30px;
  width: 60%;
  border-radius: 30px;
  overflow: hidden;
}

.suscribe-input input {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  float: left;
  font-size: 15px;
  line-height: 24px;
  padding: 11px 15px;
  width: 70%;
  height: 50px;
}

.suscribe-input button {
  background: #852508 none repeat scroll 0 0;
  border: medium none;
  border-radius: 0 20px 20px 0;
  color: #fff;
  float: left;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 20px;
  width: 30%;
}

.suscribe-input button:hover {
  background: #fff none repeat scroll 0 0;
  color: #852508;
}

/*----------------------------------------
 8.Team Area Css
----------------------------------------*/

.team-member {
  background: rgba(0, 0, 0, 0.65) none repeat scroll 0 0;
  display: block;
  margin-right: -15px;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.team-member::before {
  background: rgba(0, 0, 0, 0) url("../img/team/team01.jpg") repeat scroll 0 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  margin-right: -15px;
  padding: 10px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  transition: 5s;
  transform: scale(1);
}

.team-member:hover.team-member::before {
  transform: scale(1.2);
}

.single-team-member {
  border: 1px solid #ddd;
}

.team-left-text h4 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-left-text p {
  color: #fff;
  font-size: 17px;
  line-height: 26px;
}

.email-news {
  display: block;
  margin: 30px 0;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.email-news .email_button input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #fff;
  float: left;
  font-size: 13px;
  padding: 8px;
  width: 81%;
}

.email-news .email_button>button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #fff;
  float: left;
  font-size: 16px;
  padding: 8px 12px;
  text-align: center;
}

.email-news .email_button>button:hover {
  background: #852508;
  border: 1px solid #fff;
  color: #fff;
}

.team-left-icon ul li {
  display: inline-block;
}

.team-left-icon ul li a:hover {
  color: #852508;
  background: #fff;
  border: 2px solid #fff;
}

.team-left-icon ul li a {
  border: 2px solid #fff;
  color: #fff;
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 37px;
  margin: 0 3px;
  width: 40px;
}

.team-member-carousel .single-team-member {
  overflow: hidden;
  width: 100%;
}

.single-team-member:hover .team-img a:after {
  opacity: 1;
}

.single-team-member:hover .team-social-icon {
  top: 45%;
  opacity: 1;
}

.team-img {
  position: relative;
}

.team-img>a {
  display: block;
}

.team-img>a::after {
  background: rgba(0, 0, 0, 0.70);
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  transition: all 0.5s ease 0s;
  width: 100%;
  opacity: 0;
}

.team-social-icon {
  left: 50%;
  margin-left: -61px;
  opacity: 0;
  position: absolute;
  top: 30%;
  transition: 1.3s;
}

.team-social-icon ul li {
  display: inline-block;
}

.team-social-icon ul li a {
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 35px;
  margin: 0 3px;
  width: 34px;
}

.team-social-icon ul li a:hover {
  color: #fff;
  border: 1px solid #852508;
  background: #852508;
}

.team-content {
  padding: 10px 0px;
}

.team-content>h4, .team-content>p {
  color: #444;
  margin-bottom: 5px;
}

.team-content.head-team p {
  margin-bottom: 0;
}

.team-left-icon.text-center {
  margin-bottom: 20px;
}

.head-team h4 {
  display: inline-block;
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  text-transform: uppercase;
}

/*--------------------------------*/

/*  9.review Area
/*--------------------------------*/

.reviews-area {
  /* قم بإزالة أو التعليق على سطر صورة الخلفية الأصلية */
  /* background: url("../img/background/bg1.jpg") no-repeat scroll center center / cover; */

  background-image: linear-gradient(to bottom, #FFDAB9, #FFA500) !important; /* هذا هو التدرج */
  background-color: transparent !important; /* لضمان أن اللون الثابت لا يتعارض مع التدرج */
  background-attachment: scroll !important;

  height: auto;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
  width: 100%;
  /* أي خصائص أخرى تريدها لهذا القسم */
}
.work-left-text {
  background: #852508 none repeat scroll 0 0;
}

.work-left-text {
  width: 50%;
}

.work-right-text {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  float: right;
  height: 100%;
  overflow: hidden;
  padding: 71px 0;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.work-right-text h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
}

.work-right-text h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  text-transform: uppercase;
}

.work-right-text .sus-btn {
  margin-left: 0;
  margin-top: 20px;
}

.single-awesome-4 {
  display: block;
  float: left;
  overflow: hidden;
  width: 33.33%;
}

.single-awesome-4 .add-actions {
  padding: 10px 20px;
}

/*----------------------------------------
 10.Portfolio Area Css
----------------------------------------*/

.pst-content {
  padding-left: 10px;
}

.project-menu {
  margin-bottom: 40px;
  text-align: center;
}

.project-menu li {
  display: inline-block;
}

.project-menu li a {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #444;
  border-radius: 20px;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  margin: 0 4px;
  padding: 6px 15px;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}

.project-menu li a.active, .project-menu li a:hover {
  border-color: #852508;
  background: #852508;
  color: #fff;
  text-decoration: none;
}

.single-awesome-portfolio {
  float: left;
  overflow: hidden;
  padding: 15px;
  width: 25%;
  position: relative;
}

.single-awesome-project {
  overflow: hidden;
  margin-bottom: 30px;
}

.first-item {
  margin-bottom: 30px;
}

.awesome-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.awesome-img>a {
  display: block;
  position: relative;
}

.single-awesome-project:hover .awesome-img>a::after {
  opacity: 1;
}

.single-awesome-project:hover .add-actions {
  opacity: 1;
  bottom: 0;
}

.awesome-img>a::after {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: 0.4s;
}

.add-actions {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  bottom: 30px;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 10px 15px;
  position: absolute;
  transition: all 0.4s ease 0s;
  width: 100%;
}

.project-dec {
  display: block;
  height: 100%;
  width: 100%;
}

.project-dec a {
  display: block;
  height: 100%;
  width: 100%;
}

.project-dec h4 {
  margin-bottom: 5px;
}

.project-dec h4:hover {
  color: #fff;
}

.project-dec h4 {
  color: #ddd;
  font-size: 24px;
  margin-top: -45px;
  padding-top: 50%;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
}

.project-dec span {
  color: #ddd;
  font-size: 13px;
}

.project-action-btn {
  display: block;
  height: 100%;
  text-align: center;
  transition: all 1s ease 0s;
  width: 100%;
}

.project-action-btn li {
  display: block;
  height: 100%;
  width: 100%;
}

.project-action-btn li a {
  display: block;
  height: 100%;
  width: 100%;
}

/*----------------------------------------*/

/* 11. Pricing Area
/*----------------------------------------*/

.pricing-area {
  background: rgba(0, 0, 0, 0.02) none repeat scroll 0 0;
}

.pri_table_list {
  border: 1px solid #ccc;
  text-align: center;
  transition: all 0.4s ease 0s;
  background: #fff;
}

.pri_table_list h3 span {
  font-size: 16px;
}

.pri_table_list ol li {
  border-bottom: 1px solid #ccc;
  color: #666;
  padding: 12px 15px;
  position: relative;
  text-align: left;
}

.pri_table_list li.check.cross::after {
  content: "\f00d";
  font-family: fontawesome;
  font-size: 14px;
  position: absolute;
  right: 50px;
  top: 12px;
  color: indianred;
}

.pri_table_list li.check::after {
  content: "\f00c";
  font-family: fontawesome;
  font-size: 14px;
  position: absolute;
  right: 50px;
  top: 12px;
  color: #852508;
}

.pri_table_list button {
  background: #444 none repeat scroll 0 0;
  border: 1px solid #444;
  color: #fff;
  margin-bottom: 25px;
  padding: 10px 35px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  border-radius: 30px;
}

.pri_table_list>h3 {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  line-height: 25px;
  padding: 30px 0 20px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}

.pri_table_list ol {
  list-style: outside none none;
  margin: 0;
  padding: 0 0 25px;
}

.pri_table_list.active {
  transition: all 0.4s ease 0s;
  position: relative;
  overflow: hidden;
}

.saleon {
  background: #852508 none repeat scroll 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  left: -26px;
  padding: 2px 25px;
  position: absolute;
  text-transform: uppercase;
  top: 16px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}

.pri_table_list>button:hover {
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
}

.active>h3 {
  background: #f5f5f5 none repeat scroll 0 0;
  color: #333;
  transition: all 0.4s ease 0s;
}

.active>button {
  background: #852508 none repeat scroll 0 0;
  border: 1px solid #852508;
  color: #fff;
  transition: 0.4s;
}

.active>button:hover {
  background: #333 none repeat scroll 0 0;
  border: 1px solid #333;
  color: #fff;
  transition: 0.4s;
}

/*----------------------------------------
 12.Testimonial Area Css
----------------------------------------*/

.testimonials-area {
  background: rgba(0, 0, 0, 0) url("../img/background/slider1.jpg") no-repeat fixed center top / cover;
  height: auto;
  width: 100%;
}

.testi-inner {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.testi-overly {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.quate {
  border: 1px dotted #fff;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-size: 24px;
  height: 70px;
  line-height: 70px;
  width: 70px;
}

.quate:hover {
  color: #fff;
}

.testi-img img {
  border: 1px dotted rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  height: 80px;
  margin: 0 auto;
  padding: 5px;
  transition: background 0.6s ease-out 0s;
  width: 80px !important;
}

.testi-text p {
  color: #fff;
  font-size: 16px;
  line-height: 1.5em;
  margin: 20px 0;
  letter-spacing: 1px;
}

.testi-text h6 {
  color: #fff;
  font-size: 20px;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot>span {
  background: #fff none repeat scroll 0 0;
  display: inline-block;
  height: 8px;
  width: 8px;
  -moz-transition: 0.4s;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {
  bottom: -30px;
  display: block;
  left: 50%;
  margin-left: -20px;
  position: absolute;
}

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

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot {
  display: inline-block;
  margin: 0 3px;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span {
  background: #852508;
}

.testi-text.text-center>h6 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.guest-rev {
  color: #ddd;
  font-size: 16px;
}

.guest-rev>a {
  color: #852508;
  font-size: 14px;
}

/*--------------------------------*/

/*  13.Blog Area
/*--------------------------------*/

.blog-area {
  height: auto;
  width: 100%;
}

.blog-text h4 a {
  color: #444;
  text-decoration: none;
}

.blog-text h4 {
  color: #444;
  margin-bottom: 15px;
}

.blog-btn {
  border-bottom: 1px dotted #444;
  color: #444;
  text-decoration: none;
}

.blog-btn {
  border-bottom: 1px dotted #444;
  color: #444;
  display: inline-block;
  padding: 0 1px 5px 0;
  position: relative;
  text-decoration: none;
}

.blog-btn {
  position: relative;
}

.blog-btn::after {
  content: "\f178";
  font-family: fontawesome;
  position: absolute;
  right: -20px;
  top: 1px;
  transition: all 0.3s ease 0s;
}

.blog-btn:hover::after {
  right: -30px;
}

.blog-btn:hover {
  color: #333;
  text-decoration: none;
}

.blog_meta span.date_type i {
  margin-left: 5px;
}

.blog-meta span.comments-type {
  margin-left: 5px;
}

.blog-meta span i {
  padding-right: 10px;
}

.blog-content .blog-meta {
  border-bottom: 1px dotted #333;
}

.blog-meta {
  border-bottom: 1px dotted #fff;
  padding: 10px 0;
}

.comments-type>a, .date-type, .blog-meta span.comments-type {
  color: #333;
  letter-spacing: 1px;
  margin-right: 5px;
}

.blog-meta .comments-type i {
  padding-right: 0 !important;
}

.blog-content-right .comments-type>a, .blog-content-right .date-type, .blog-content-right .blog-meta span.comments-type, .blog-content-right .blog-text p {
  color: #fff;
  letter-spacing: 1px;
}

.single-blog .ready-btn {
  border: 1px solid #444;
  border-radius: 30px;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
  padding: 10px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}

.single-blog .ready-btn:hover {
  border: 1px solid #852508;
  color: #fff;
}

/*------------------------------
  13. Quote area
--------------------------------*/

.suscribe-area {
  background: #852508 none repeat scroll 0 0;
  padding: 30px 0;
}

.suscribe-text {
  display: block;
  padding: 10px 0;
}

.suscribe-text h3 {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sus-btn {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #852508;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin-left: 100px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 30px;
}

.sus-btn:hover {
  background: #852508 none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #fff;
}

/*--------------------------------*/

/*  14.Contact Area
/*--------------------------------*/

.contact-area {
  height: auto;
  width: 100%;
}

.contact-content {
  padding: 100px;
  background: #000 none repeat scroll 0 0;
}

.contact-content-right {
  padding: 100px;
}

.contact-form input[type="text"], .contact-form input[type="email"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #444;
  height: 40px;
  margin-bottom: 16px;
  padding-left: 20px;
  width: 100%;
}

.contact-form textarea  {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #444;
  height: 140px;
  padding: 20px;
  width: 100%;
}

.contact-form button[type="submit"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: #444;
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding: 12px 30px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  border-radius: 30px;
}

.contact-form button[type=submit]:hover {
  color: #fff;
  border: 1px solid #852508;
  background: #852508;
}

.contact-form  #sendmessage {
  color: #852508;
  border: 1px solid #852508;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

.contact-form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

.contact-form #sendmessage.show, .contact-form #errormessage.show, .contact-form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

.single-icon i {
  font-size: 24px;
  width: 50px;
  height: 50px;
  border: 1px solid #444;
  line-height: 46px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.single-icon p {
  font-size: 16px;
  line-height: 30px;
}

.contact-icon {
  margin-bottom: 40px;
}

#google-map {
  height: 370px;
  margin-bottom: 20px;
}

/*----------------------------------------*/

/*  15. Footer Area
/*----------------------------------------*/

.footer-area {
  padding: 40px 0 0px 0; /* تم تغيير padding-bottom إلى 0 هنا أيضاً */
  background: #f9f9f9;
  /* بقية الخصائص */
}

.footer-head p {
  color: #444;
}

.footer-head h4 {
  color: #444;
  font-size: 16px;
  letter-spacing: 2px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.footer-logo {
  padding-bottom: 20px;
}

.footer-logo h2 {
  color: #222;
  padding: 0;
  margin: 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}

.footer-logo h2 span {
  color: #852508;
}

.footer-icons ul li {
  display: inline-block;
}

.footer-icons ul li a {
  border: 1px solid #444;
  color: #444;
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 38px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
  border-radius: 50%;
}

.flicker-img>a {
  float: left;
  padding: 1px;
  width: 33.33%;
}

.footer-icons {
  margin-top: 30px;
}

.footer-contacts p span {
  color: #852508;
  font-weight: 700;
}

.popular-tag ul li {
  display: inline-block;
}

.footer-content {
  display: block;
  overflow: hidden;
}

.popular-tag ul li a:hover, .footer-icons ul li a:hover {
  background: #852508;
  border: 1px solid #852508;
  color: #fff;
}

.popular-tag ul li a {
  border: 1px solid #444;
  border-radius: 30px;
  color: #444;
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 5px 3px;
  padding: 5px 10px;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  transition: all 0.4s ease 0s;
  width: 70px;
  text-align: center;
}

.footer-area-bottom {
  background: #f1f1f1 none repeat scroll 0 0;
  padding: 15px 0 0px 0; /* تم تغيير padding-bottom إلى 0 */
  /* أو يمكنك ببساطة: padding-bottom: 0 !important; */
}

.copyright-text a:hover {
  text-decoration: underline;
  color: #852508;
}

.copyright-text a {
  color: #444;
}

.copyright>p {
  margin-bottom: 0;
  color: #444;
}

.copyright a, .credits a {
  color: #852508;
}

.credits {
  padding-top: 5px;
  text-align: center;
}

/*----------------------------------------*/

/*  16.Home Page 2  CSS
/*----------------------------------------*/

.header-bg {
  background: url(../img/slider/slider1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
}

.header-bg.home-2 {
  width: 100%;
  height: 100%;
  position: relative;
}

.home-overly {
  background: rgba(0, 0, 0, 0.50);
  height: 100%;
  position: absolute;
  width: 100%;
}

.home-2 .layer-1-3, .home-3 .layer-1-3 {
  margin: 10px 0 0;
}

/*----------------------------------------*/

/*  17.Home Page 3  CSS
/*----------------------------------------*/

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

.header-image.home-3 {
  width: 100%;
  height: 100%;
  position: relative;
}

.table {
  width: 100%;
  height: 100%;
  display: table;
}

.table-cell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

/*----------------------------------------
  18. Blog page
----------------------------------------*/

.page-area {
  position: relative;
}

.blog-page .banner-box {
  margin-bottom: 40px;
}

.search-option input {
  border: medium none;
  padding: 6px 15px;
  width: 80%;
}

.search-option {
  border: 1px solid #ccc;
  height: 42px;
  margin-bottom: 30px;
}

.search-option button {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  font-size: 20px;
  padding: 8px 23px;
}

.search-option button:hover {
  color: #852508;
}

.left-blog h4 {
  border-bottom: 1px solid #ddd;
  color: #444;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 0;
  padding: 15px 10px;
  text-transform: uppercase;
}

.left-blog {
  background: #f9f9f9 none repeat scroll 0 0;
  margin-bottom: 30px;
  overflow: hidden;
  padding-bottom: 20px;
}

.left-blog li {
  border-bottom: 1px solid #ddd;
  display: block;
}

.left-blog ul li a:hover {}

.left-blog ul li a {
  color: #444;
  display: block;
  font-size: 14px;
  padding: 10px;
  text-transform: capitalize;
}

.recent-single-post {
  border-bottom: 1px solid #ddd;
  display: block;
  overflow: hidden;
  padding: 15px 10px;
}

.ready-btn {
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  margin-top: 30px;
  padding: 12px 40px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
}

.ready-btn:hover {
  color: #fff;
  background: #852508;
  border: 1px solid #852508;
  text-decoration: none;
}

.post-img {
  display: inline-block;
  float: left;
  padding: 0 5px;
  width: 35%;
}

.pst-content {
  display: inline-block;
  float: left;
  width: 65%;
}

.pst-content p a:hover, .left-blog ul li a:hover {
  color: #852508;
}

.blog-page .single-blog {
  margin-bottom: 40px;
}

.pst-content p a {
  color: #444;
  font-size: 15px;
}

.header-bottom h1, .header-bottom h2 {
  color: #fff;
}

.blog-tags {
  padding: 1px 0;
}

.left-blog li:last-child {
  border-bottom: 0;
}

.popular-tag.left-blog ul li a:hover {
  color: #fff;
}

.popular-tag.left-side-tags.left-blog ul {
  padding: 0 10px;
}

.blog-1 .banner-box {
  margin-bottom: 30px;
}

.left-tags .left-side-tags ul li {
  border-bottom: 0;
}

.left-tags .left-side-tags ul li a {
  padding: 3px 10px;
  width: auto;
}

.left-side-tags h4 {
  margin-bottom: 15px;
}

/*----------------------------------------*/

/*  19.	Blog Details css
/*----------------------------------------*/

.post-information h2 {
  color: #363636;
  font-size: 22px;
  text-transform: uppercase;
}

.post-information {
  padding: 20px 0;
}

.post-information .entry-meta span a {
  color: #444;
  display: inline-block;
  padding: 10px 0;
}

.entry-meta span a:hover {
  color: #852508;
}

.post-information .entry-meta {
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
}

.post-information .entry-meta span i {
  padding: 0 10px;
}

.entry-content>p {
  color: #444;
}

.entry-meta>span {
  color: #444;
}

.entry-content blockquote {
  background: #fff none repeat scroll 0 0;
  border-left: 5px solid #852508;
  font-size: 17.5px;
  font-style: italic;
  margin: 0 0 20px 40px;
  padding: 22px 20px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
  background-color: #852508;
  border-color: #852508;
  color: #fff;
  cursor: default;
  z-index: 3;
}

.social-sharing {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #ccc;
  display: block;
  margin: 30px 0;
}

.social-sharing>h3 {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  padding: 20px 10px;
}

.sharing-icon {
  display: inline-block;
  float: right;
  padding: 13px 10px;
}

.sharing-icon a {
  border: 1px solid #444;
  color: #444;
  display: block;
  float: left;
  font-size: 18px;
  height: 34px;
  line-height: 30px;
  margin-left: 10px;
  text-align: center;
  width: 34px;
}

.sharing-icon a:hover {
  color: #852508;
  border: 1px solid #852508;
}

.single-blog .author-avatar {
  float: left;
  margin-right: 10px;
}

.single-blog .author-description h2 {
  font-size: 18px;
  margin: 0;
  padding: 0 0 5px;
}

.author-info {
  background: #fff none repeat scroll 0 0;
  float: left;
  margin: 30px 0;
  padding: 15px;
  width: 100%;
}

.single-post-comments {
  margin-bottom: 60px;
  max-width: 650px;
}

.comments-heading h3, h3.comment-reply-title {
  border-bottom: 1px solid #e8e8e9;
  color: #444;
  font-size: 18px;
  margin: 0 0 20px;
  padding: 0 0 5px;
  text-transform: uppercase;
}

.comments-list ul li {
  margin-bottom: 25px;
}

.comments-list-img {
  float: left;
  margin-right: 15px;
}

.comments-content-wrap {
  color: #42414f;
  font-size: 12px;
  line-height: 1;
  margin: 0 0 15px 80px;
  padding: 10px;
  position: relative;
}

.author-avatar {
  display: inline-block;
  float: left;
  width: 10%;
}

.author-description h2 {
  color: #777;
  font-size: 20px;
  text-transform: uppercase;
}

.author-description h2 a {
  color: #000;
}

.comments-content-wrap span b {
  margin-right: 5px
}

.comments-content-wrap span a:hover {}

span.post-time {
  margin-right: 5px
}

.comments-content-wrap p {
  color: #909295;
  line-height: 18px;
  margin-bottom: 5px;
  margin-top: 15px;
}

li.threaded-comments {
  margin-left: 50px
}

.comment-respond {
  margin-top: 60px;
}

h3.comment-reply-title {}

span.email-notes {
  color: #42414f;
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

.comment-respond p {
  color: #444;
  margin-bottom: 5px;
}

.comment-respond input[type=text], .comment-respond input[type=email] {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  height: 32px;
  margin-bottom: 15px;
  padding: 0 0 0 10px;
  width: 100%;
}

.comment-respond textarea#message-box {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  max-width: 100%;
  padding: 10px;
  height: 130px;
  width: 100%;
}

.comment-respond input[type="submit"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #852508;
  border-radius: 20px;
  box-shadow: none;
  color: #444;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  line-height: 14px;
  margin-top: 20px;
  padding: 10px 15px;
  text-shadow: none;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  white-space: nowrap;
}

.comments-content-wrap span a {
  color: #000;
}

.comments-content-wrap span a:hover {
  color: #852508;
}

.comment-respond input[type=submit]:hover {
  border: 1px solid #852508;
  color: #fff;
  background: #852508;
}

.single-blog .blog-pagination {
  border-top: 1px solid #e5e5e5;
  margin: 0;
  padding-top: 30px;
}

/*----------------------------------------
 .End CSS
----------------------------------------*/

/* تحديث أيقونات التنقل في Nivo Slider لـ Font Awesome 5 */

/* التأكد من أن الأيقونات تستخدم الخط الصحيح والوزن الصحيح لـ Font Awesome 5 */
.nivo-directionNav a {
    font-family: "Font Awesome 5 Free" !important; /* هام جداً: تحديد الخط الجديد */
    font-weight: 900 !important; /* لضمان ظهور الأيقونات الصلبة (Solid) */
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none; /* إزالة أي تزيين نصي إذا وجد */
    /* إذا كانت الأزرار تعتمد على صور خلفية، قم بإلغائها */
    background-image: none !important;
}

/* أيقونة السهم الأيسر (السابق) */
.nivo-prevNav::before {
    content: "\f053"; /* هذا هو كود Unicode لأيقونة fa-chevron-left */
    font-size: 24px; /* يمكن تعديل حجم الأيقونة */
    color: #fff; /* يمكن تعديل لون الأيقونة */
    /* التأكد من تمركز الأيقونة داخل الزر */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1; /* ضبط ارتفاع السطر */
}

/* أيقونة السهم الأيمن (التالي) */
.nivo-nextNav::before {
    content: "\f054"; /* هذا هو كود Unicode لأيقونة fa-chevron-right */
    font-size: 24px; /* يمكن تعديل حجم الأيقونة */
    color: #fff; /* يمكن تعديل لون الأيقونة */
    /* التأكد من تمركز الأيقونة داخل الزر */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1; /* ضبط ارتفاع السطر */
}

/* قد تحتاج أيضاً لضبط ارتفاع وعرض أزرار التنقل نفسها إذا كانت الايقونات أكبر أو أصغر */
/* .nivo-directionNav a {
    width: 50px;
    height: 50px;
} */

/* -----------------------------------------------------------
مشكلة أيقونات أسهم Nivo Slider بعد الترقية لـ Font Awesome 5
------------------------------------------------------------- */

/* التأكد من إزالة أي صور خلفية سابقة لأزرار التنقل */
.nivo-directionNav a.nivo-prevNav,
.nivo-directionNav a.nivo-nextNav {
    background-image: none !important; /* هام: لإلغاء أي صور أسهم سابقة */
    background: transparent !important; /* التأكد من أن الخلفية شفافة */
    opacity: 1 !important; /* التأكد من أنها ليست شفافة ومخفية */
    visibility: visible !important; /* التأكد من أنها مرئية */
    display: block !important; /* التأكد من أنها تظهر ككتلة */
    /* قد تحتاج لضبط الأبعاد إذا كانت الأيقونات لا تتناسب مع المساحة */
    width: 50px !important;  /* مثال: يمكن تغيير العرض */
    height: 50px !important; /* مثال: يمكن تغيير الارتفاع */
    line-height: 50px !important; /* لجعل الأيقونة تتوسط عمودياً */
    text-align: center !important; /* لتوسيط الأيقونة أفقياً */
    box-sizing: border-box !important; /* للتأكد من حساب الحشوة والحدود ضمن العرض والارتفاع */
}

/* تطبيق أيقونة السهم الأيسر (السابق) لـ Font Awesome 5 */
.nivo-directionNav a.nivo-prevNav::before {
    font-family: "Font Awesome 5 Free" !important; /* تحديد خط Font Awesome 5 */
    font-weight: 900 !important; /* لـ Solid Icons (fas) */
    content: "\f053" !important; /* Unicode لأيقونة fa-chevron-left */
    font-size: 28px !important; /* حجم الأيقونة، يمكن تعديله */
    color: #fff !important; /* لون الأيقونة، يمكن تعديله */
    /* التأكد من أن الأيقونة تظهر في منتصف الزر */
    position: relative !important; /* أو absolute إذا كان الزر نفسه لديه position: relative */
    top: 0 !important;
    left: 0 !important;
    transform: none !important; /* إلغاء أي تحويلات سابقة قد تمنع الظهور */
    display: block !important; /* التأكد من عرضها */
}

/* تطبيق أيقونة السهم الأيمن (التالي) لـ Font Awesome 5 */
.nivo-directionNav a.nivo-nextNav::before {
    font-family: "Font Awesome 5 Free" !important; /* تحديد خط Font Awesome 5 */
    font-weight: 900 !important; /* لـ Solid Icons (fas) */
    content: "\f054" !important; /* Unicode لأيقونة fa-chevron-right */
    font-size: 28px !important; /* حجم الأيقونة، يمكن تعديله */
    color: #fff !important; /* لون الأيقونة، يمكن تعديله */
    /* التأكد من أن الأيقونة تظهر في منتصف الزر */
    position: relative !important; /* أو absolute إذا كان الزر نفسه لديه position: relative */
    top: 0 !important;
    left: 0 !important;
    transform: none !important; /* إلغاء أي تحويلات سابقة قد تمنع الظهور */
    display: block !important; /* التأكد من عرضها */
}

/* يمكنك أيضاً التحقق من تنسيق الأزرار نفسها (المربع أو الدائرة) في nivo-slider-theme.css */
/* إذا كانت أزرار التنقل لها background-color معين أو border-radius، فقد تجدها في هذا الملف */
/* .nivo-directionNav a {
    background-color: rgba(0, 0, 0, 0.5) !important; // مثال لخلفية شفافة
    border-radius: 50% !important; // مثال لجعلها دائرية
} */


/* لإزالة الصورة الخلفية من قسم "Lines Ideas Factory" */
.reviews-area {
    background-image: none !important;
    background: transparent !important; /* لضمان عدم وجود أي لون خلفية ثابت */
    background-attachment: scroll !important; /* لضمان إلغاء أي تثبيت سابق للخلفية */
}

/* لتغيير لون خلفية قسم "Lines Ideas Factory" */
.reviews-area {
    background-image: none !important; /* للتأكد من إزالة الصورة */
    background-color: #000000 !important; /* هنا ضع كود اللون الذي تريده */
    /* background: transparent !important;  // هذا السطر لم يعد ضرورياً إذا كنت تحدد لوناً */
    background-attachment: scroll !important;
}


/* لجعل النص في قسم الـ Footer (Lines Ideas) محاذاة متساوية */
.footer-head p {
    text-align: justify !important;
    /* يمكن أيضاً إضافة ضبط للمسافات بين الكلمات إذا لزم الأمر */
    /* text-justify: inter-word; */ /* هذه الخاصية قد لا تعمل في كل المتصفحات بنفس الشكل */
}

/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family: sans-serif; }

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.image-container{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  justify-items: stretch;
  animation: animation 12s linear infinite;
}


/* تنسيقات قسم التقنيات المتقدمة */
.advanced-tech-area {
    padding: 80px 0;
    background-color: #ffffff;
    color: #fff; /* لون النص أبيض */
}

.advanced-tech-area .section-headline h2 {
    color: #fff; /* لون العنوان */
    margin-bottom: 50px;
    position: relative;
    display: inline-block; /* لجعل التدرج اللوني يعمل على العنوان */
    background: linear-gradient(to right, #8f0101, #b5b5b5 , #8f0101); /* تدرج لوني مثل الصورة */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.tech-carousel .single-tech {
    text-align: center;
    padding: 20px;
}

.tech-carousel .single-tech img {
    max-width: 100%; /* اجعلها تتمدد لتناسب العرض */
    max-height: 120px; /* تحديد أقصى ارتفاع للحفاظ على المحاذاة */
    width: auto; /* السماح للعرض بالتعديل تلقائيا */
    margin-left: 5px;
}

/* يمكنك حذف هذا الجزء بالكامل إذا لم تعد تريد أي تأثير عند التمرير */
/*
.tech-carousel .single-tech img:hover {
    filter: grayscale(0%) brightness(100%);
}
*/

.tech-carousel .single-tech img:hover {
    filter: grayscale(0%) brightness(100%); /* الألوان الأصلية عند التمرير */
}

.tech-carousel .single-tech h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #fff;
}

.tech-carousel .single-tech p {
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
}

/* تنسيق نقاط التنقل (dots) إذا كانت مفعلة */
.advanced-tech-area .owl-dots {
    margin-top: 30px;
}
.advanced-tech-area .owl-dots .owl-dot span {
    background: #555; /* لون النقاط */
}
.advanced-tech-area .owl-dots .owl-dot.active span {
    background: #33ccff; /* لون النقطة النشطة */
}



#languageToggleButton {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #852508;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 15px; /* للتنسيق مع عناصر القائمة */
}





/*===========================
    01. Common CSS
===========================*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap");
body {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden;
}

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

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

a {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

button {
  cursor: pointer;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

h2 {
  font-size: 45px;
}

@media (max-width: 767px) {
  h2 {
    font-size: 36px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  h2 {
    font-size: 40px;
  }
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0px;
}

.img-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  z-index: -1;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 450px;
  }
}

.logo img {
  width: 50%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .img-wrapper {
    display: none;
  }
}

@media (max-width: 767px) {
  .img-wrapper {
    display: none;
  }
}

@media (max-width: 767px) {
  .odd-col {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}

.slick-slide:focus {
  outline: 0;
}

.common-btn {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.common-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.common-btn:hover::after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

.mt-205 {
  margin-top: 205px;
}

.mt-210 {
  margin-top: 210px;
}

.mt-215 {
  margin-top: 215px;
}

.mt-220 {
  margin-top: 220px;
}

.mt-225 {
  margin-top: 225px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.mb-205 {
  margin-bottom: 205px;
}

.mb-210 {
  margin-bottom: 210px;
}

.mb-215 {
  margin-bottom: 215px;
}

.mb-220 {
  margin-bottom: 220px;
}

.mb-225 {
  margin-bottom: 225px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pt-205 {
  padding-top: 205px;
}

.pt-210 {
  padding-top: 210px;
}

.pt-215 {
  padding-top: 215px;
}

.pt-220 {
  padding-top: 220px;
}

.pt-225 {
  padding-top: 225px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-205 {
  padding-bottom: 205px;
}

.pb-210 {
  padding-bottom: 210px;
}

.pb-215 {
  padding-bottom: 215px;
}

.pb-220 {
  padding-bottom: 220px;
}

.pb-225 {
  padding-bottom: 225px;
}

input {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 16px;
  border: 1px solid rgba(112, 112, 112, 0.3);
}

input::-webkit-input-placeholder {
  font-size: 16px;
}

input:-ms-input-placeholder {
  font-size: 16px;
}

input::-ms-input-placeholder {
  font-size: 16px;
}

input::placeholder {
  font-size: 16px;
}

input:focus {
  border-color: #2F80ED;
}

.subscribe-form-1 {
  position: relative;
  max-width: 570px;
}

.subscribe-form-1 input {
  padding: 20px 25px;
  width: 100%;
}

.subscribe-form-1 button {
  padding: 20px 17px;
  color: #fff;
  border: 1px solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (max-width: 767px) {
  .subscribe-form-1 button {
    position: relative;
    margin-top: 15px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .subscribe-form-1 button {
    position: absolute;
  }
}

.countdown {
  padding-top: 40px;
  padding-bottom: 40px;
}

.countdown .single-count-content {
  position: relative;
  padding: 0 40px;
  text-align: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .countdown .single-count-content {
    padding: 0 30px;
  }
}

@media (max-width: 767px) {
  .countdown .single-count-content {
    padding: 0 10px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .countdown .single-count-content {
    padding: 0 20px;
  }
}

.countdown .single-count-content::after {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 50px;
}

@media (max-width: 767px) {
  .countdown .single-count-content::after {
    top: -10px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .countdown .single-count-content::after {
    top: -5px;
  }
}

.countdown .single-count-content:first-child {
  padding-left: 0px;
}

.countdown .single-count-content:last-child {
  padding-right: 0px;
}

.countdown .single-count-content:last-child::after {
  display: none;
}

.countdown .single-count-content .count {
  font-size: 50px;
}

@media (max-width: 767px) {
  .countdown .single-count-content .count {
    font-size: 35px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .countdown .single-count-content .count {
    font-size: 45px;
  }
}

.countdown .single-count-content .text {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .countdown .single-count-content .text {
    font-size: 15px;
  }
}

main.main-14 .main-wrapper {
  width: 100%;
}

main.main-14 .main-wrapper.demo-14 {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Roboto", sans-serif;
  color: #3E2945;
  position: relative;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

main.main-14 .main-wrapper.demo-14 .img-wrapper {
  margin-left: -100px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  main.main-14 .main-wrapper.demo-14 .img-wrapper {
    display: block;
    margin-left: -150px;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .img-wrapper {
    margin-left: 0px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  main.main-14 .main-wrapper.demo-14 .img-wrapper img {
    width: 100%;
  }
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .img-wrapper img {
    width: 100%;
  }
}

main.main-14 .main-wrapper.demo-14 .shape-1 {
  left: 0;
  right: 0;
  margin: auto;
  top: 120px;
}

main.main-14 .main-wrapper.demo-14 .shape-2 {
  right: 380px;
  top: 95px;
}

main.main-14 .main-wrapper.demo-14 .shape-3 {
  right: 88px;
  top: 230px;
}

main.main-14 .main-wrapper.demo-14 .shape-4 {
  right: 295px;
  top: 550px;
}

main.main-14 .main-wrapper.demo-14 .shape-5 {
  right: -48px;
  bottom: 250px;
}

main.main-14 .main-wrapper.demo-14 .shape-6 {
  right: 272px;
  bottom: -20px;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper {
  margin-left: -40px;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper {
    margin-left: 0px;
    margin-bottom: 30px;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper h1 {
  font-size: 100px;
  font-weight: 700;
  margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper h1 {
    font-size: 70px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper h1 {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper h1 {
    font-size: 50px;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper p {
  font-size: 16px;
  line-height: 26px;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown {
  padding-top: 45px;
  padding-bottom: 50px;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content {
  padding: 0 36px;
  position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content {
    padding: 0 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content {
    padding: 0 15px;
  }
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content {
    padding: 0 15px;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content:first-child {
  padding-left: 0px;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content:last-child {
  padding-right: 0;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content:last-child::after {
  content: '';
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content::after {
  content: ':';
  font-size: 50px;
  color: #3E2945;
  position: absolute;
  top: -5px;
  right: 0;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content::after {
    font-size: 35px;
    top: 0;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content .count {
  font-size: 50px;
  margin-bottom: 5px;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content .count {
    font-size: 35px;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content .text {
  font-size: 16px;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .countdown .single-count-content .text {
    font-size: 15px;
  }
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input {
  border: 1px solid rgba(112, 112, 112, 0.3);
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input::-webkit-input-placeholder {
  color: #3E2945;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input:-ms-input-placeholder {
  color: #3E2945;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input::-ms-input-placeholder {
  color: #3E2945;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input::placeholder {
  color: #3E2945;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form input:focus {
  border-color: #44ACBE;
}

main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form button {
  background: #44ACBE;
}

@media (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form button {
    position: unset;
    margin-top: 15px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  main.main-14 .main-wrapper.demo-14 .content-wrapper .subscribe-form button {
    position: absolute;
  }
}
/*# sourceMappingURL=style.css.map */



/* في ملف style.css أو responsive.css */

/* لإخفاء الصورة على الشاشات الصغيرة جداً (الجوالات) */
@media (max-width: 767px) {
    .reviews-area .work-left-text {
        display: none;
    }

    /* يمكنك أيضًا ضبط عرض النص ليأخذ المساحة كاملة إذا أردت */
    .reviews-area .work-right-text {
        width: 100% !important; /* تأكد من تجاوز أي عرض محدد مسبقًا */
        float: none !important; /* إلغاء خاصية float إذا كانت موجودة */
        padding: 20px !important; /* ضبط الحشو ليناسب الجوال */
    }
}

/* إذا كان لديك تنسيق افتراضي لـ .work-right-text يتضمن float أو width معين */
/* مثلاً، في الكود الأصلي لديك: */
/*
.work-right-text {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    float: right;
    height: 100%;
    overflow: hidden;
    padding: 71px 0;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}
*/
/* ستحتاج إلى إلغاء بعض هذه الخصائص على الجوال: */
@media (max-width: 767px) {
    .reviews-area .work-right-text {
        width: 100%;
        float: none;
        position: relative; /* تغيير من absolute لـ relative لتجنب مشاكل التخطيط */
        top: auto;
        right: auto;
        padding: 30px 20px; /* حشو مناسب للجوال */
        background: rgba(160, 32, 32, 0.8); /* احتفظ بالخلفية */
        height: auto; /* السماح بارتفاع تلقائي */
    }
    /* قد تحتاج أيضاً لضبط الـ .work-us أو .reviews-area إذا كانت تحد من الارتفاع */
    .reviews-area .work-us {
        display: block; /* للتأكد من أنها لا تستخدم flex أو grid يفسد التخطيط */
        width: 100%;
    }
}

body {
    font-family: 'Almarai', 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Almarai', 'Raleway', sans-serif;
}

body {
    font-family: 'IBM Plex Sans Arabic', 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans Arabic', 'Raleway', sans-serif;
}


/* هذا الجزء يجب أن يتم إضافته في ملف style.css */

@media (max-width: 767px) {
    /* ضبط عرض وحشو حاوية النص (.work-right-text) */
    .reviews-area .work-right-text {
        width: 100% !important; /* تأكد أن النص يأخذ العرض الكامل للمساحة المتاحة */
        float: none !important; /* إلغاء أي float قد يسبب مشاكل في الترتيب */
        text-align: center !important; /* لضمان توسيط النص بالكامل داخل الـ div */
        padding: 30px 20px !important; /* ضبط الحشو من الجوانب ومن الأعلى والأسفل */
        position: relative !important; /* مهم لإلغاء أي position:absolute قد يفسد التخطيط */
        height: auto !important; /* السماح بارتفاع تلقائي بناءً على محتوى النص */
    }

    /* ضبط خصائص النص نفسه (h4 و h2) */
    .reviews-area .work-right-text h4 {
        font-size: 16px !important; /* حجم الخط للنص الأساسي (يمكنك زيادته أو تقليله) */
        line-height: 1.6 !important; /* تباعد الأسطر لتحسين القراءة */
        text-align: justify !important; /* إذا أردت أن تكون بداية ونهاية كل سطر مستقيمة */
        /* أو text-align: center !important; إذا كنت تفضل التوسيط */
        /* أو text-align: right !important; إذا كنت تفضل المحاذاة لليمين للنصوص العربية */
        margin-bottom: 20px !important; /* مسافة أسفل الفقرة */
    }

    .reviews-area .work-right-text h2 {
        font-size: 28px !important; /* حجم الخط للعنوان الرئيسي "Lines Ideas Factory" */
        margin-bottom: 15px !important;
    }

    /* هذا الجزء خاص بضمان أن حاوية work-us تتصرف بشكل صحيح على الجوال */
    .reviews-area .work-us {
        display: block !important; /* إذا كانت تستخدم flex/grid وكانت تسبب مشاكل */
        /* يمكنك تجربة flex-direction: column !important; إذا كانت تستخدم flexbox ولم تكن display: block; كافية */
        /* ويمكنك أيضاً تجربة align-items: center !important; مع flexbox */
    }
}



/* Our Company Stats Section */
.skill-area {
    padding: 60px 0; /* هذا قد يكون موجوداً بالفعل */
    padding-top: 80px; /* أضف أو عدّل هذه القيمة لزيادة المسافة العلوية */
    padding-bottom: 60px; /* يمكنك تعديل هذه القيمة أيضاً للمسافة السفلية إذا لزم الأمر */
    /* أو يمكنك استخدام */
    /* margin-top: 80px; */ /* إذا كنت تفضل الهامش */
}

/* مثال: إذا كان الـ skill-area لديه padding 60px 0; وتريد زيادة الجزء العلوي فقط */
/* يمكنك أن تجعلها هكذا */
.skill-area {
    padding: 80px 0 60px; /* (padding-top) (padding-right/left) (padding-bottom) */
}


/* Style for Counter Numbers and Labels */
.skill-area .single-skill .counter-value,
.skill-area .single-skill h4,
.skill-area .single-skill h3.progress-h4 {
    color: #333 !important; /* لون موحد وغامق للأرقام والمسميات والعنوان الذي يحتويها */
}

/* يمكنك الاحتفاظ بخصائص الحجم والوزن الأخرى للأرقام بشكل منفصل إذا أردت تخصيصها أكثر */
.skill-area .single-skill .counter-value {
    font-size: 48px; /* حجم الخط للأرقام */
    font-weight: 700; /* سمك الخط للأرقام */
    display: inline-block;
    margin-bottom: 10px;
}

.skill-area .single-skill h4 {
    font-size: 20px; /* حجم الخط لوصف العداد (مثلاً عميل سعيد) - يمكنك تعديله */
    /* خصائص أخرى لـ h4 إذا أردت */
}

.skill-area .single-skill h3.progress-h4 {
    /* خصائص أخرى لـ h3.progress-h4 إذا أردت */
}


/*----------------------------------
# Join Us / Careers Section
----------------------------------*/
.careers-area {
    padding: 80px 0; /* حشو علوي وسفلي للقسم */
    background: #f9f9f9; /* خلفية فاتحة للقسم لتمييزه */
}

.careers-area .section-headline h2 {
    color: #333; /* لون عنوان القسم */
}

.careers-area .section-headline p {
    color: #666; /* لون وصف القسم */
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.8;
}

.single-job-post {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
    height: 100%; /* لضمان تساوي الارتفاعات في الصفوف */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* لدفع الزر للأسفل */
}

.single-job-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.single-job-post h3 {
    font-size: 24px;
    color: #e51d27; /* لون عنوان الوظيفة (لون علامتك التجارية) */
    margin-bottom: 20px;
    font-weight: 600;
}

.single-job-post ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.single-job-post ul li {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.single-job-post ul li i {
    color: #e51d27; /* لون أيقونة المعلومات */
    margin-left: 10px; /* مسافة بين الأيقونة والنص */
}

.single-job-post p {
    font-size: 15px;
    color: #777;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1; /* للسماح للفقرة بأخذ المساحة المتاحة ودفع الزر للأسفل */
}

.single-job-post a {
    display: inline-block;
    background: #e51d27; /* لون زر التقديم */
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
}

.single-job-post a:hover {
    background: #c01a23; /* لون أغمق عند التمرير */
}

.single-job-post a i {
    margin-right: 8px; /* مسافة بين النص والسهم */
}

.general-application-note {
    margin-top: 40px;
    padding: 30px;
    background: #f0f0f0;
    border-radius: 8px;
}

.general-application-note p {
    font-size: 18px;
    color: #1f1f1f;
    margin-bottom: 20px;
}

.general-application-note .ready-btn {
    background: #5cb85c; /* لون زر إرسال السيرة الذاتية (يمكن تغييره) */
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.general-application-note .ready-btn:hover {
    background: #4cae4c;
}

/* Responsive Adjustments for smaller screens */
@media (max-width: 767px) {
    .single-job-post {
        padding: 20px;
    }
    .single-job-post h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .single-job-post ul li {
        font-size: 15px;
    }
    .single-job-post p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .single-job-post a {
        padding: 8px 20px;
        font-size: 15px;
    }
    .general-application-note {
        padding: 20px;
    }
    .general-application-note p {
        font-size: 16px;
    }
    .general-application-note .ready-btn {
        padding: 10px 25px;
        font-size: 15px;
    }
}

/* General Section Headline Color */
.section-headline h2 {
    color: #1f1f1f; /* اللون الأحمر الذي يظهر في قسم Join Us */
    /* تأكد من أن هذا التنسيق يطبق على جميع العناوين الرئيسية للأقسام */
    /* وقد تحتاج إلى إضافة !important إذا كان هناك تنسيق آخر يلغيه */
}

/* مثال: إذا كان لديك تنسيق محدد لقسم Careers فقط، فسيظهر هكذا */
.careers-area .section-headline h2 {
    color: #1f1f1f; /* لون عنوان قسم التوظيف */
}
/* لكن لجعله يطبق على الكل، يكفي تعديل .section-headline h2 */