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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
/* تخصيص شريط التمرير للمتصفحات المبنية على Webkit (مثل Chrome وSafari) */
::-webkit-scrollbar {
  width: 25px;
  /* زيادة عرض شريط التمرير */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* خلفية المسار */
  border-radius: 10px;
  /* جعل الحواف دائرية قليلاً */
}

::-webkit-scrollbar-thumb {
  background-color: #026f83;
  /* لون مقبض شريط التمرير */
  border-radius: 10px;
  /* جعل المقبض دائريًا */
  border: 5px solid #f1f1f1;
  /* إضافة مساحة أكبر حول المقبض */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #026f83;
  /* لون المقبض عند التمرير */
}

/* تخصيص شريط التمرير في Firefox */
html {
  scrollbar-width: 25px;
  /* زيادة عرض شريط التمرير */
  scrollbar-color: #026f83 #f1f1f1;
  /* تخصيص لون المقبض والخلفية */
}



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

/* الزر سيكون مخفي في البداية */
#scrollTopBtn {
  display: none;
  /* إخفاء الزر افتراضيًا */
  position: fixed;
  /* ليبقى في مكانه أثناء التمرير */
  bottom: 0px;
  /* المسافة من أسفل الشاشة */
  right: 20px;
  /* المسافة من الجانب الأيمن */
  z-index: 99;
  /* ليظهر فوق المحتوى */
  background-color: #026f83   ;
  /* لون الخلفية */
  color: #ffffff;
  /* لون النص */
  border: none;
  /* إزالة الحدود */
  padding: 15px;
  /* مساحة داخلية */
  border-radius: 15px;
  /* جعل الزر دائري */
  cursor: pointer;
  /* شكل المؤشر عند التمرير على الزر */
  font-size: 18px;
  /* حجم الأيقونة */
}

#scrollTopBtn:hover {
  background-color: #026f83;
  /* تغيير لون الخلفية عند التمرير */
}



/* الزر الثابت الخاص بـ Contact */
#contactBtn {
  position: fixed;
  bottom: -50px;
  /* خارج الشاشة قبل الأنيميشن */
  left: 80%;
  transform: translateX(-50%);
  background-color: #026f83;
  color: rgb(255, 255, 255);
  border: none;
  padding: 25px 50px;
  font-size: 20px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: bottom 1.5s ease-in-out;
  z-index: 1000;
}

/* أنيميشن لتحريك الزر من الأسفل إلى مكانه */
#contactBtn.show {
  bottom: 0px;
  /* عندما يظهر الزر */
}

/* الزر الثابت الخاص بـ Call Me (يظهر فقط على الموبايل) */
#callMeBtn {
  display: none;
  /* إخفاء الزر افتراضيًا */
  position: fixed;
  bottom: 0px;
  left: 20px;
  background-color: #026f83;
  color:  rgb(255, 255, 255);
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* إظهار زر Call Me فقط على الجوال */
@media screen and (max-width: 768px) {
  #contactBtn {
    position: fixed;
    bottom: -50px;
    /* خارج الشاشة قبل الأنيميشن */
    left: 160px;
    transform: translateX(-50%);
  }

  #callMeBtn {
    display: block;
  }
}

.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: 'Montserrat';

  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

a {
  text-decoration: none !important;
}



ul {
  margin-bottom: 0px;
}



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

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Montserrat';
}

::selection {
  background: #026f83;
  color: #fff;
}

::-moz-selection {
  background: #026f83;
  color: #fff;
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.green-button a {
  margin-top: 20px;
  font-size: 1.5rem;
  color: #fff;
  background-color: #43ba7f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.green-button a:hover {
  opacity: 0.9;
}

.orange-button a {
  font-size: 1.5rem;
  margin-top: 20px;
  color: #fff;
  background-color: #026f83;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.orange-button a:hover {
  opacity: 0.9;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 16px;
  text-transform: uppercase;
  color: #026f83;
  font-weight: 700;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  color: #212741;
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.background-header {
  background-color: #212741;
  position: fixed !important;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.header-area {
  background-image: url(../images/header-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  height: 100px;
  top: 0;
  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;
  position: fixed;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 30px;
  margin-right: 150px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -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;
}

.header-area .main-nav .logo span {
  font-size: 20px;
}

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

.header-area .main-nav .nav {
  float: right;
  margin-top: 40px;
  margin-right: 0px;
  background-color: transparent;
  -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;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}


.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  font-size: 16px;
  line-height: .8;
  text-transform: uppercase;
  font-family: 'Montserrat';
  display: block;

  font-weight: bolder;
  text-transform: capitalize;
  color: #fff;
  -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;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
  text-transform: uppercase;
}



.header-area .main-nav .nav li:last-child a:hover {
  color: #fff;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  padding-top: 0px !important;
  height: 40px;
}

/*  */
.nav {
  list-style-type: none;
  padding: 0;
}


.nav li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

/*  */
/* Services Section */
.services {
  text-align: center;
  margin-bottom: 70px;
  padding: 0 20px;
  /* Add padding to the sides */
}

/* Services Title */
.services h2 {
  font-weight: bold;
  width: 100%;
  max-width: 800px;
  /* Limit the width of the title */
  margin: auto;
  font-size: 2.5em;
  margin-bottom: 10px;
}

/* Services Description */
.services-description {
  padding: 30px;
  font-size: 1.2em;
  color: rgb(30, 29, 29);
  margin-bottom: 40px;
  width: 100%;
  max-width: 800px;
  /* Limit the width of the description */
  margin: 0 auto 40px auto;
}

/* Services List */
.services-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Adjust spacing between items */
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(100px);
  animation: slide-up 3s ease-in-out forwards;
}

/* Keyframes for Slide-Up Animation */
@keyframes slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Service Card */
.service {
  text-align: center;
  width: 150px;
  /* Adjust width for responsiveness */
  height: 200px;
  margin: 20px;
  /* Add margin to create space around each card */
  border-radius: 15px;
  padding: 20px;
  /* Adjust padding inside each card */
  background: #fff;
  transition: transform 0.9s ease, box-shadow 0.9s ease, border 0.9s ease, background 0.9s ease;
  background: linear-gradient(90deg, #026f83 50%, #fff 50%);
  /* Gradient from left to right */
  background-size: 200% 100%;
  background-position: right bottom;
  /* Start from the right */
  overflow: hidden;
  /* Prevent text overflow */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Hover Effect for Service Card */
.service:hover {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  border-color: #fff;
  background-position: left bottom;
  /* Move to the left on hover */
}

/* Icon Inside Service Card */
.service i {
  font-size: 4em;
  color: black;
  margin-bottom: 15px;
  transition: transform 0.9s ease, color 0.9s ease, text-shadow 0.9s ease;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* Service Card Title */
.service h3 {
  font-size: 1em;
  color: #333;
  transition: color 0.4s ease;
}

/* Hover Effect for Card Title */
.service:hover h3 {
  color: #fff;
  transform: translateY(-5px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .services-list {
    gap: 15px;
    /* Adjust spacing for smaller screens */
  }

  .service {
    width: 150px;
    /* Adjust width for smaller screens */
    margin: 15px;
    /* Adjust margin for smaller screens */
  }
}

@media (max-width: 480px) {
  .services h2 {
    font-size: 2em;
    /* Adjust font size for smaller screens */
  }

  .services-description {
    font-size: 1em;
    /* Adjust font size for smaller screens */
  }

  .service {
    width: 120px;
    /* Adjust width for very small screens */
    padding: 15px;
    /* Adjust padding for very small screens */
  }
}



/*  */


/* */


/* Story Section */
.story-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  max-width: 1200px;
  margin: auto;
  position: relative;
  /* Ensure the background layer is positioned relative to this container */
  flex-wrap: wrap;
  /* Allow items to wrap on smaller screens */
}

/* Text Container */
.text-container {
  width: 50%;
  box-sizing: border-box;
  /* Include padding in width calculation */
}

/* Text Container Headings and Paragraphs */
.text-container h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.text-container p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

/* Image Container */
.image-container {
  position: relative;
  width: 45%;
  box-sizing: border-box;
  /* Include padding in width calculation */
}

/* Image */
.image-container img {
  position: relative;
  width: 100%;
  z-index: 2;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Background Layer */
.background-layer {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 110%;
  height: 110%;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  z-index: 1;
  border-radius: 20px;
  transform: translate(75px, -25px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {

  .text-container,
  .image-container {
    width: 100%;
    text-align: center;
    /* Center text on smaller screens */
    margin-bottom: 20px;
    /* Space between text and image */
  }

  .image-container {
    margin: 0 auto;
    /* Center image */
  }

  .background-layer {
    display: none;
    /* Hide background layer on small screens */
  }
}

@media (max-width: 480px) {
  .text-container h2 {
    font-size: 1.8rem;
    /* Adjust font size for smaller screens */
  }

  .text-container p {
    font-size: 1rem;
    /* Adjust font size for smaller screens */
  }

  .story-section {
    padding: 20px;
    /* Reduce padding on very small screens */
  }
}


/* Slider Styling */
.slider {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 40px;
  overflow: hidden;
  padding: 20px 0;
}

/* Slider Wrapper */
.slider-wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease;
}

/* Slider Slide Styling */
.slider-slide {
  position: relative;
  min-width: 25%;
  /* تصغير حجم الكاردات لتتناسب أكثر */
  height: 300px;
  /* تقليل ارتفاع الكارد */
  background-size: cover;
  background-position: center;
  margin: 0 10px;
  /* تصغير المسافة بين الكاردات */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hover Content Styling */
.hover-content {
  position: absolute;
  bottom: -50%;
  /* يبدأ مخفي في أسفل الكارد */
  left: 0;
  width: 100%;
  height: 50%;
  /* يشغل نصف الكارد */
  background-color: #027083a5;
  /* خلفية سوداء نصف شفافة */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.5s ease;
  /* أنيميشن سلس */
  padding: 10px;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Show content on hover */
.slider-slide:hover .hover-content {
  bottom: 0;
  /* يظهر المحتوى عند التمرير */
  opacity: 1;
}

/* Hover Content Text Styling */
.hover-content h3 {
  margin: 0;
  color: white;
  font-size: 1.8rem;
  font-size: 1.2rem;
  /* تصغير الخط قليلاً */
}

.hover-content a {
  color: #fff;
  text-decoration: none;
  margin-top: 10px;
  font-size: 1.2rem;
  /* تصغير حجم النص للرابط */
  border-bottom: 1px solid white;
  padding-bottom: 5px;
}

.hover-content a:hover {
  color: #026f83;
  /* لون ذهبي عند التمرير */
  border-bottom-color: white;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .slider-slide {
    min-width: 25%;
    /* تصغير الكاردات للشاشات المتوسطة */
    height: 250px;
  }
}

@media (max-width: 768px) {
  .slider-slide {
    min-width: 33.33%;
    /* تصغير الكاردات للشاشات الصغيرة */
    height: 250px;
  }
}

@media (max-width: 480px) {
  .slider-slide {
    min-width: 50%;
    /* تصغير الكاردات للموبايل */
    height: 250px;
  }
}












/* أساسي للفوتر */
footer {
  /* margin-top: 120px; */

  color: white;
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
  margin: 10px;
}

.footer-logo {
  width: 100px;
  font-weight: bold;
  font-size: 20px;
  color: white;
  margin-bottom: 15px;
}

.privacy-policy {
  color: #ccc;
  text-decoration: none;
  display: block;
  margin-top: 10px;
}

.privacy-policy:hover {
  color: white;
}

.footer-center h4,
.footer-right h4 {
  font-weight: bold;
  font-size: 22px;
  color: white;
  margin-bottom: 15px;
}

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

.social-links li {
  margin-bottom: 5px;
}

.social-links a {
  color: white;
  text-decoration: none;
  font-size: large;
  /* جعل النص كله في قسم السوشيال بنفس الحجم */
}

.social-links a i {
  margin-right: 8px;
  font-size: large;
}

.social-links a:hover {
  color: #ccc;
}
a{
  transition: 0.5s;
}

.footer-right p {
  margin: 5px 0;
  font-size: large;
  /* تصغير النص تحت قسم Contact */
}
.footer-logo:hover{
  color: black;
}
.footer-right a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  /* نفس حجم النص للبريد الإلكتروني */
}

.footer-right a:hover {
  color: #ccc;
}

/* التجاوب للشاشات الصغيرة */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    margin-bottom: 20px;
  }

  .footer-logo {
    margin: 0 auto;
  }

  .social-links a {
    display: inline-block;
  }
}

/* */

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #fff;
  transition: width 0.9s ease, background-color 0.9s ease;
}

.nav a:hover::after {
  width: 90%;
}

/*  */
.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-left: 25px !important;
}





.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 2px;
  top: 12px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 140px;
  background-color: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  border-radius: 5px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

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

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !important;
  padding-left: 20px;
  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: 12px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #026f83 !important;
  padding-left: 25px;
}

.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;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

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

.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;
  left: 0;
}

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

.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;
  left: 0;
  width: 75%;
}

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

.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 {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}



@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {

    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
    line-height: 80px;
  }

  .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-left: 0px;
  }

  .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: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    width: 0px;
    line-height: 50px !important;
    text-align: left;
    padding: 10px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !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: #3B566E;
    right: 30px;
    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;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.swiper-container {
  height: calc(100vh - 0px);
  margin: 0px;
  background-color: #212741;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

.swiper-slide-active h2 {
  animation: fadeInLeft .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active p {
  animation: fadeInRight .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .div-dec {
  animation: fadeIn .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .buttons .green-button,
.swiper-slide-active .buttons .orange-button {
  animation: fadeInUp .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.slide-inner .header-text {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.slide-inner .header-text h2,
p {
  position: relative;
  z-index: 2;
  font-size: 28px;
  color: #fff;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
  line-height: 40px;
  margin-bottom: 40px;
}

.slide-inner .header-text .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin-bottom: 40px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text p {
  color: #fff;
  margin-right: 60px;
  margin-bottom: 50px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text h2 em {
  font-style: normal;
  color: #ff511a;
}

.slide-inner .header-text .buttons {
  display: inline;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text .buttons .green-button {
  display: inline;
  float: left;
  margin-right: 20px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}

/*
---------------------------------------------
services
---------------------------------------------
*/

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #43ba7f;
  margin-bottom: 30px;
  margin-right: 30px;
}



/*
---------------------------------------------
cta
---------------------------------------------
*/

section.simple-cta {
  /* background-image: url(../images/cta-bg.jpg); */
  background: linear-gradient(135deg, #026f83, #fff);

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h4 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 50px;
}

section.simple-cta h4 em {
  font-style: normal;
  color: #43ba7f;
}

section.simple-cta h4 strong {
  color: #ff511a;
  font-weight: 700;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}

section.simple-cta .buttons {
  display: flex;
  justify-content: end;
}

section.simple-cta .buttons .orange-button {
  margin-left: 20px;
}

section.simple-cta .buttons .orange-button,
section.simple-cta .buttons .green-button {
  margin-top: 25px;
}



/*
---------------------------------------------
about us
---------------------------------------------
*/

section.about-us {
  margin-top: 90px;

}

section.about-us .section-heading {
  padding-top: 30px;
}

section.about-us .naccs {
  position: relative;
}

section.about-us .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.about-us .naccs .menu div.active {
  color: #026f83;
}

section.about-us ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.about-us ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.about-us ul.nacc li .main-list,
section.about-us ul.nacc li .list-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

section.about-us ul.nacc li .last-item {
  margin-bottom: 0px;
}

section.about-us ul.nacc li span.title {
  font-size: 15px;
  color: #212741;
  font-weight: 600;
  display: inline-block;
  width: 24%;
}

section.about-us ul.nacc li span.item-title {
  color: #43ba7f !important;
  font-weight: 600 !important;
}

section.about-us ul.nacc li span.item {
  font-size: 15px;
  color: #212741;
  font-weight: 400;
  display: inline-block;
  width: 24%;
}

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

section.about-us .right-content {
  margin-left: 60px;
}

section.about-us .right-content h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

section.about-us .right-content p {
  margin-bottom: 50px;
}


/*
---------------------------------------------
calculator
---------------------------------------------
*/

section.calculator {
  margin-top: 150px;
  background-image: url(../images/calculator-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.calculator .left-image {
  margin: -110px 45px -80px 0px;
}

section.calculator .section-heading {
  text-align: left;
}

section.calculator .section-heading h4 {
  color: #fff;
}

#calculate label {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
}

#calculate input,
#calculate select {
  background-color: rgba(121, 134, 151, 0.7);
  border: none;
  border-radius: 5px;
  width: 100%;
  height: 42px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 30px;
  outline: none;
}

#calculate select {
  cursor: pointer;
}

#calculate button.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #026f83;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#calculate button.orange-button:hover {
  opacity: 0.9;
}



/* 
---------------------------------------------
testimonials
--------------------------------------------- 
*/

section.testimonials {
  margin-top: 90px;
}

section.testimonials .section-heading {
  padding-top: 30px;
}

.testimonials .item {
  border-radius: 15px;
  padding: 50px 320px 50px 50px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  margin: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding-top: 35px;
}

.testimonials .item i {
  width: 70px;
  height: 70px;
  background-color: #43ba7f;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  color: #fff;
  font-size: 44px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.testimonials .item p {
  font-size: 16px;
  font-style: italic;
}

.testimonials .item h4 {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.testimonials .item span {
  margin-top: 5px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #43ba7f;
}

.testimonials .item img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 300px;
  border-radius: 5px;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #026f83;
  border-radius: 50%;
  margin: 0px 4px;
}

.testimonials .owl-dots .active {
  background-color: #026f83;
}



/* 
---------------------------------------------
partners
--------------------------------------------- 
*/

section.partners {
  background-color: #212741;
  padding: 80px 0px;
}

section.partners .item {
  margin: 0px 15px;
  cursor: pointer;
  transition: all .3s;
}

section.partners .item:hover {
  opacity: 0.75;
}



/* 
---------------------------------------------
footer 
--------------------------------------------- 
*/

footer {
  background-color: #181d30;
  text-align: center;
  padding: 25px 0px;
}

footer p {
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #ff511a;
}



/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');
/* استيراد خط مكثف */

.page-heading {
  background-image: url(../images/all/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 215px 0px 120px 0px;
  text-align: center;
}

.page-heading h2 {
  font-size: 56px;
  color: #fff;
  font-weight: 700;
}

.page-heading .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin: 20px auto 0 auto;
}


.page-headingg {
  background-image: url(../images/all/ser2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  padding: 150px 0;
  display: flex;
  align-items: center;
}


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.page-headingg h2 {
  margin-top: 20px;
  font-size: 30px;
  /* حجم الخط */
  color: #fff;
  font-weight: 700;
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: 8px;
  /* المسافة بين الحروف */
  transform: scale(1.2, 4.5);
  /* تمديد الحروف بالطول */
  display: inline-block;
  /* لضمان أن التأثير لا يؤثر على سلوك الصندوق */
}





.service-description p {
  font-size: 23px;
  color: #fff;
  line-height: 1.6;
  margin-top: 20px;
  width: 80%;
}

@media (max-width: 768px) {
  .page-headingg {
    padding: 100px 20px;
  }

  .page-headingg h2 {
    font-size: 36px;
    transform: scaleY(1.2);
    /* تعديل التمديد في الشاشات الصغيرة */
  }

  .service-description p {
    font-size: 16px;
  }
}




/* 
---------------------------------------------
about us page
--------------------------------------------- 
*/

section.top-section .left-image img {
  border-radius: 10px;
}

section.top-section .accordions {
  border-radius: 5px;
  padding: 50px 40px;
  background-color: #fff;
  margin-left: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.accordions .accordion {
  border-bottom: 1px solid #eee;
}

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

.accordion-head {
  padding: 35px 0px !important;
  font-size: 22px;
  font-weight: 600;
  color: #212741;
  cursor: pointer;
  transition: color 200ms ease-in-out;

}

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

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #43ba7f;
  border-bottom: none;
}

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

.accordion-body {
  padding: 0px;
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}

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

section.what-we-do {
  margin-bottom: -30px;
}

.what-we-do .left-content {
  margin-right: 60px;
}

.what-we-do .left-content h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

.what-we-do .left-content p {
  margin-bottom: 40px;
}

.what-we-do .right-items .item {
  border-radius: 5px;
  padding: 40px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
}

.what-we-do .right-items .item em {
  position: absolute;
  font-style: normal;
  font-size: 44px;
  color: #43ba7f;
  font-weight: 600;
  right: 15px;
  top: 5px;
  transition: all .3s;
}

.what-we-do .right-items .item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 22px;
}

.what-we-do .right-items .item:hover em {
  top: 10px;
}



/* 
---------------------------------------------
services page
--------------------------------------------- 
*/

.main-services .service-item {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ecf8f2;
}

.main-services .last-service {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.main-services .left-image {
  margin-right: 15px;
}

.main-services .left-image img {
  border-radius: 5px;
}

.main-services .right-image {
  margin-left: 15px;
}

.main-services .right-image img {
  border-radius: 5px;
}

.main-services .right-text-content {
  margin-left: 15px;
}

.main-services .left-text-content {
  margin-right: 15px;
}

.main-services .right-text-content i,
.main-services .left-text-content i {
  font-size: 64px;
  color: #43ba7f;
  background-color: #ecf8f2;
  width: 120px;
  height: 120px;
  text-align: center;
  display: inline-block;
  line-height: 120px;
  border-radius: 5px;
}

.main-services .right-text-content h4,
.main-services .left-text-content h4 {
  font-size: 36px;
  font-weight: 700;
  color: #212741;
  margin-top: 40px;
  margin-bottom: 30px;
}

section.service-details .naccs {
  position: relative;
}

section.service-details .naccs .menu {
  text-align: center;
}

section.service-details .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}



section.service-details ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.service-details ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.service-details ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.service-details ul.nacc li .right-content {
  padding: 50px 50px 50px 0px;
  margin-left: 470px;
}

section.service-details ul.nacc li .right-content h4 {
  font-size: 24px;
  color: #212741;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 120px;
}

section.service-details ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.service-details ul.nacc li .right-content span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #212741;
  font-style: italic;
  margin-bottom: 12px;
}

section.service-details ul.nacc li .right-content .last-span {
  margin-bottom: 0px;
}

section.service-details ul.nacc li .right-content p {
  margin-bottom: 30px;
}

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



/* 
---------------------------------------------
contact us page
--------------------------------------------- 
*/

section.map .info-item {
  text-align: center;
  padding: 40px 30px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.map .info-item:hover {
  margin-top: -70px;
}

section.map .info-item i {
  font-size: 36px;
  color: #43ba7f;
  margin-bottom: 25px;
}

section.map .info-item h4 {
  font-size: 18px;
  color: #212741;
  font-weight: 600;
  margin-bottom: 12px;
}

section.map .info-item a {
  font-size: 15px;
  font-weight: 600;
  color: #43ba7f;
  transition: all 0.3s;
}

section.map .info-item a:hover {
  color: #ff511a;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact input::placeholder,
#contact textarea::placeholder {
  color: #212741;
}

#contact button.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #df9878;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: #43ba7f;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


body {
  overflow-x: hidden;

}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }

  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }

  .header-area {
    background-color: #212741;
  }

  .slide-inner .header-text {
    width: 80%;
  }

  .simple-cta {
    text-align: center;
  }

  section.simple-cta .buttons {
    justify-content: center;
  }

  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 15px;
    font-size: 15px;
    padding: 15px 20px;
  }

  section.about-us .right-content {
    margin-left: 0px;
    margin-top: 60px;
  }

  section.calculator .left-image {
    display: none;
  }

  .testimonials .item img {
    max-width: 200px;
    right: 50px;
  }

  section.partners .item {
    margin: 15px;
  }

  section.top-section .accordions {
    margin-left: 0px;
    margin-top: 45px;
  }

  .what-we-do .left-content {
    margin-right: 0px;
    margin-bottom: 45px;
  }

  .main-services .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .main-services .right-text-content {
    margin-left: 0px;
  }

  .main-services .right-image {
    margin-left: 0px;
    margin-top: 30px;
  }

  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0px;
    transform: translateY(0px);
  }

  section.service-details ul.nacc li .left-image img {
    border-radius: 15px;
  }

  section.service-details ul.nacc li .right-content {
    padding: 50px;
    margin-left: 0px;
  }

  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0px;
  }

  section.service-details ul.nacc li.active {
    display: inline-block;
  }

  section.service-details ul.nacc li {
    display: none;
  }

  section.map .info-item {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    line-height: 100px;
  }

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

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }

  .slide-inner .header-text p {
    display: none;
  }

  .slide-inner .header-text {
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .slide-inner .header-text .div-dec {
    margin-left: auto;
    margin-right: auto;
  }

  .slide-inner .header-text .buttons {
    display: inline-flex;
  }

  .slide-inner .header-text .buttons .green-button {
    float: none;
  }

  .services .service-item i {
    margin-bottom: 35px;
  }

  section.about-us ul.nacc li span.item-title {
    font-size: 14px !important;
  }

  section.about-us ul.nacc li span.item {
    font-size: 13px;
  }

  .testimonials .item i {
    margin-bottom: 60px;
  }

  .testimonials .item img {
    max-width: 100px;
    right: 50px;
    top: 35px;
    transform: translateY(0);
  }

  .testimonials .item {
    padding: 50px;
  }
}





.services {
  padding: 50px 0;

}

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  /* Adds spacing on the sides */
}

.section {
  margin-bottom: 50px;
}

.section h2 {
  color: #df9878;
  /* Golden color */
  font-size: 2em;
  font-weight: 900;
  margin-bottom: 10px;
  text-align: left;
  padding-bottom: 5px;
}


.section p {
  font-size: 1.2em;
  margin-bottom: 20px;
  color: white;
  font-weight: 600;
  text-align: left;
}

.columns {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  /* Adds space between columns */
}

.main-column {
  width: 50%;
  /* Main column takes 50% */
}

.columns ul {
  list-style: circle;
  width: 50%;
  /* Other two columns share 50% */
  padding-left: 0;
  /* Removes default padding */
}

.columns ul li {
  margin-bottom: 10px;
  font-size: large;
  color: white;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .columns {
    flex-direction: column;
    margin-left: 20px;
  }

  .main-column,
  .columns ul {
    width: 100%;
    /* Full width on smaller screens */
  }
}


/* start work */

/* Default styling for desktop */
#portfolio {
  padding-top: 170px;
  /* Start content 300px from the top */
  max-width: 1200px;
  /* Limit the width for central alignment */
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Header Container */
.header-container {
  text-align: left;
  margin-bottom: 30px;
}

.header-container .text {
  font-size: 30px;
  /* حجم الخط */
  color: #fff;
  font-weight: 700;
  margin-left: 50px;
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  transform: scale(1.8);
  /* تمديد الحروف بالطول */
  display: inline-block;
  margin-bottom: 40px;
}




.filter-menu {
  display: flex;
  overflow-x: auto;
  /* السماح بالتحريك الأفقي */
  white-space: nowrap;
  /* الأزرار تكون في سطر واحد */
  scroll-behavior: smooth;
  /* تحريك سلس */
}

.filter-menu::-webkit-scrollbar {
  display: none;
  /* إخفاء شريط التمرير في Chrome, Safari, and Opera */
}

.filter-menu {
  -ms-overflow-style: none;
  /* إخفاء شريط التمرير في Internet Explorer and Edge */
  scrollbar-width: none;
  /* إخفاء شريط التمرير في Firefox */
}

.filter-btn {
  background: none;
  border: none;
  color: white;
  padding: 18px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  transition: color 0.3s ease;
  display: inline-block;
  /* الحفاظ على العناصر في نفس السطر */
  flex: 0 0 auto;
  /* جعل الأزرار تأخذ حجمها الطبيعي فقط */
  margin-right: 10px;
  white-space: nowrap;
  transition: background-color 0.3s ease;
  position: relative;

}


.count {
  position: absolute;
  top: -20px;
  right: -15px;
  /* ضبط المسافة لتوسيع العدد */
  color: white;
  border-radius: 50%;
  padding: 15px 10px 8px;
  font-size: 16px;
  min-width: 25px;
  /* جعل الـspan يأخذ مساحة أكبر */
  text-align: center;
  /* لتوسيط الرقم داخل الـspan */
}





.filter-btn:hover {
  color: #026f83;
  border-bottom: 2px solid #333;
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 4 cards per row */
  gap: 30px;
  /* Add spacing between cards */
  padding: 0 15px;

}



/* Project Card */
.project-card {
  position: relative;
  overflow: hidden;
  /* لضمان أن التأثيرات لا تتجاوز حدود الكارد */
  border-radius: 8px;
  opacity: 0;
  transform: translateX(50px);
  /* Start from the right */
  transition: opacity 0.4s ease, transform 0.4s ease;
}


.project-card.show {
  opacity: 1;
  transform: translateX(0);
  /* Move to its original position */
}

.project-card.hide {
  opacity: 0;
  transform: translateX(50px);
  /* Move back to the right */
}

.project-card.animate {
  opacity: 1;
  transform: translateX(0);
}

.filter-btn.active {
  color: #df9878;
  font-weight: bold;
  border-bottom: 2px solid #333;
  /* Underline active state */
}




.project-card img {
  border-radius: 10px;
  width: 100%;
  /* ضبط العرض ليكون كامل حجم الـ card */
}


.project-card p {
  text-align: left;
  margin-top: 10px;
  font-size: 1.1rem;
  color: white;
  padding: 0px 10px;
}

.project-card p:hover {
  text-decoration: underline;
  color: #026f83;
  cursor: pointer;
}

.project-card h6 {
  text-align: left;
  margin-top: 10px;
  padding-left: 5px;
  font-size: 1.3rem;
  color: #df9878;
}

.project-card h6:hover {
  color: white;
  cursor: pointer;

}


.project-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive styling for tablets and mobile phones */
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cards per row for tablets */
    gap: 20px;
  }

  .header-container .text {
    font-size: 26px;
    /* Reduce font size */
    letter-spacing: 6px;
    /* Reduce letter spacing */
    transform: scale(1.1, 3.5);
    /* Adjust letter scaling */
    margin-left: 25px;
  }

  .header-container .text1 {
    font-size: 14px;
  }

  .filter-btn {
    font-size: 0.9rem;
    /* Smaller font size for buttons */
    padding: 8px 15px;
    /* Adjust padding */
  }
}

@media (max-width: 768px) {
  #portfolio {
    padding-top: 150px;
    /* Reduce top padding on small screens */
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 cards per row for mobile phones */
    gap: 15px;
  }

  .header-container .text {
    font-size: 22px;
    /* Further reduce font size */
    letter-spacing: 4px;
    /* Further reduce letter spacing */
    transform: scale(1, 2.5);
    /* Adjust letter scaling */
  }

  .header-container .text1 {
    font-size: 12px;
    margin-left: 20px;
  }

  .filter-btn {
    font-size: 0.8rem;
    /* Smaller font size for buttons */
    padding: 10px 12px;
    /* Adjust padding */
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr;
    /* 1 card per row for very small screens */
    gap: 10px;
  }

  .header-container .text {
    font-size: 18px;
    /* Smaller font size */
    letter-spacing: 2px;
    /* Reduce letter spacing */
    transform: scale(1, 1.5);
    /* Adjust letter scaling */
  }

  .header-container .text1 {
    font-size: 14px;
    margin-left: 20px;
  }

  .filter-btn {
    font-size: 0.7rem;
    /* Smaller font size for buttons */
    padding: 15px 10px;
    /* Adjust padding */
  }
}

/* تعديل لـ portfolio للشاشات الكبيرة */
#portfolio {
  padding-left: 70px;
  /* مسافة 70px من الجانبين للشاشات الكبيرة */
  padding-right: 70px;
  /* مسافة 70px من الجانبين للشاشات الكبيرة */
}

/* تعديل لـ portfolio للشاشات الصغيرة */
@media (max-width: 1024px) {
  #portfolio {
    padding-left: 15px;
    /* مسافة 15px من الجانبين للشاشات الصغيرة */
    padding-right: 15px;
    /* مسافة 15px من الجانبين للشاشات الصغيرة */
  }
}

/* end */
















.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* عرض الشريط */
  height: 120px; /* ارتفاع الشريط */
  position: relative;
  /* background-color: aqua; */
}
.animation {
  display: flex;
  position: absolute;
  white-space: nowrap;
  animation: marquee 100s linear infinite; /* ضبط سرعة الحركة */
}
.animation img {
  width: 150px; /* عرض الصورة */
  height: 120px; /* ارتفاع الصورة */
  margin-right: 10px; /* مسافة بين الصور */
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}






/* قسم نموذج الاتصال */
.contact-us-form {
  padding: 50px 0;
}

.section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-heading h6 {
  font-size: 16px;
  color: #555;
}

.section-heading h4 {
  font-size: 28px;
  color: #333;
}

/* تنسيق النموذج */
fieldset {
  border: none;
  margin-bottom: 20px;
}

input, textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  transition: border 0.3s;
}

input:focus, textarea:focus {
  border-color: #df9878;
  outline: none;
}

/* زر إرسال */
.orange-button {
  background-color: #026f83;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.orange-button:hover {
  background-color: #026f83;
}

/* التنسيق المتجاوب */
@media (max-width: 768px) {
  .info-item {
      margin-bottom: 20px;
  }

  .contact-us-form .col-lg-6 {
      width: 100%;
  }

  .contact-us-form .col-lg-12 {
      width: 100%;
  }

  .contact-us-form .section-heading h4 {
      font-size: 24px;
    
  }
}





/*  */
@media (max-width: 768px) {
  .story-section {
      flex-direction: column;
  }

  .text-container, .image-container {
      min-width: 100%;
  }

  .text-container {
      padding: 10px;
  }

  .image-container img {
      height: 300px; /* ارتفاع مخصص للصورة في الشاشات الصغيرة */
  }
}

@media (max-width: 480px) {
  .story-section {
      margin-top: 2rem; /* تقليل المسافة العلوية للشاشات الصغيرة */
  }

  .text-container h2 {
      font-size: 1.5rem; /* تقليل حجم العنوان للشاشات الصغيرة */
  }

  .text-container p {
      font-size: 0.9rem; /* تقليل حجم النص للشاشات الصغيرة */
  
  }
}

@media (max-width: 768px) {
  .row {
      flex-direction: column; /* ترتيب العناصر تحت بعض */
  }
  .col-lg-6, .col-md-6, .col-12 {
      width: 100%; /* تأكد من أن العناصر تأخذ العرض الكامل */
      margin-top: 20px; /* مسافة من الأعلى */
  }
}

@media (max-width: 480px) {
  .header-text h2 {
      font-size: 1.5rem; /* تعديل حجم النص */
  }
  .service-description p {
      font-size: 1rem; /* تعديل حجم النص */
  }
}















.response-message {
  position: fixed; /* تجعل الرسالة ثابتة في أعلى الصفحة */
  top: 20px; /* المسافة من أعلى الصفحة */
  left: 50%; /* تحريك الرسالة لمنتصف الشاشة */
  transform: translateX(-50%); /* محاذاة الرسالة في المنتصف */
  background-color: #026f83; /* لون الخلفية الأخضر */
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  text-align: center;
  color: white; /* لون النص الأبيض */
  padding: 15px 30px; /* حواف داخلية */
  border-radius: 10px; /* زوايا مدورة */
  font-size: 18px; /* حجم الخط */
  text-align: center; /* محاذاة للنص في المنتصف */
  z-index: 9999; /* التأكد من أن الرسالة تظهر فوق كل العناصر الأخرى */
  transition: all 4s ease; /* تأثير الانتقال */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* ظل لجعل الرسالة بارزة */
}