@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');

:root {

    --accent: #D6980D;

    --dark-text: #1F1F1F;

    --dark-background: #1F1F1F;

    --white-text: #fff;

    --light-gray-text: #CDCDCD;

    --dark-gray-text: #666666;

    --white-background: #fff;

    --gray-background: #D9D9D9;

  }

  /* to be deleted tbd end*/

/* reset all default margin and padding */
img{
  pointer-events: none;
  -webkit-user-drag: none;
}
*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  user-select: none;

  -webkit-user-select: none; /* Safari */
 
  -ms-user-select: none;     /* IE/Edge */
}

ul,a{

    list-style: none; 

}

/* Set up some basic styles */

html{
  scroll-behavior: smooth;
  font-size: 16px;

}



.smooth-wrapper {

  position: fixed;

  width: 100%;

}

/* assuming CSS is in /public/css and fonts in /public/fonts/montserrat */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

body {

  line-height: 1.4;              

  width: 100vw;

  overflow-x: hidden;

    font-family: 'Montserrat';
  
}

/* Style the scrollbar itself */

::-webkit-scrollbar {

  width: 15px;  /* Width of the vertical scrollbar */

  height: 12px; /* Height of the horizontal scrollbar */

}



/* Style the thumb (the draggable part of the scrollbar) */

::-webkit-scrollbar-thumb {

  background-color: var(--dark-background); /* Thumb color */

  border-radius: 10px;       /* Rounded corners for the thumb */

  border: 3px solid #f1f1f1; /* Border around the thumb */

  transition: all 0.4s ease;

}



/* Style the track (the area the thumb slides within) */

::-webkit-scrollbar-track {

  background-color: #f1f1f1; /* Track color */

  border-radius: 10px;       /* Rounded corners for the track */

}



/* Optional: Style the hover effect on the thumb */

::-webkit-scrollbar-thumb:hover {

  background-color: var(--accent); /* Change color when the thumb is hovered */

}

.error-message{

  color: red;

}

.btn{
  padding:10px 50px;
  font-weight: bold;
  min-width: 150px;
}
.btn.primary-btn{
  background-color: var(--accent);
  color: #fff;
  transition: background-color 0.4s ease, color 0.4s ease;
   border: 1px solid var(--accent);
}
.btn.primary-btn:hover{
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}
.container{

  width: 100%;

  padding: 100px min(5%,50px);
  /* padding: 100px; */

  margin: auto; 


}
.alert{

  position: fixed;

  z-index: 24;

  bottom:30px;

  right:30px;

  transition: opacity 0.5s ease-in-out;

  animation: fadeOut 5s forwards;

  color: var(--dark-text);

  padding: 20px;

  border-radius: 20px;

  z-index: 40;

}

.alert-success{

  background-color: #4CAF50;
  color:#fff;

}

@keyframes fadeOut {

  0% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    visibility: hidden;

  }

}

.white-color{

  color: var(--dark-text) !important;

}

.dark-color{

  color: var(--dark-text) !important;

}

.mobile-only{

  background:rebeccapurple;

}

section{

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  /* overflow: hidden; */

}

.only-mobile{
  display: none !important;
}

.black-btn:hover{

    cursor: pointer;

    background-color: transparent;

    border: 1px solid var(--dark-text);

    color: var(--dark-text);

  }

.bg-gray{

    background-color: #D9D9D9;

}

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

  padding-bottom: 100px;

}
.pb-50{

  padding-bottom: 50px;

}
.pt-100{

  padding-top: 100px;

}
.pt-50{

  padding-top: 50px;

}

.ph-20{
  padding-inline: 20px;
}
.p-10{

  padding: 10px;

}

.p-20{

  padding: 20px;

}

.p-30{

  padding: 30px;

}

.p-40{

  padding: 40px;

}

.p-50{

  padding: 50px;

}

.p-100{

  padding: 100px;

}
.p-200{

  padding: 200px;

}

.pv-100{
 padding-top: 100px;
 padding-bottom: 100px;
}
.pv-200{
 padding-top: 200px;
 padding-bottom: 200px;
}
.m-auto{

  margin-inline: auto;

}

.mb-10{

  margin-bottom: 10px;

}

.mb-20{

  margin-bottom: 20px;

}

.mb-50{

  margin-bottom: 50px;

}

.mb-100{

  margin-bottom: 100px;

}

.h-100{

  height: 100%;

}

.h-50{

  height: 50%;

}

.w-100{

  width: 100%;

}

.w-50{

  width: 50%;

}

.flex{ /* this will be column in mobile */

    display: flex;

}

.flex-row{ /* this will always be row  */

  display: flex;

  flex-direction: row;

  gap: 20px;

  align-items: center;

}

.flex-column{ 

  display: flex;

  flex-direction: column;

}
.flex-wrap{
  flex-wrap: wrap;
}
.justify-center{

  justify-content: center;

}
.space-around{

  justify-content: space-around;

}

.space-evenly{

  justify-content: space-evenly;

}

.justify-start{

  justify-content: flex-start;

}

.justify-end{

  justify-content: flex-end;

}

.space-between{

  justify-content: space-between;

}

.align-start{

  align-items: flex-start;

}

.align-end{

  align-items: flex-end;

}

.align-center{

  align-items: center;

}

.gap-10{

    gap: 10px;

}

.gap-20{

    gap: 20px;

}

.gap-32{
  gap: 32px;
}
.gap-40{

    gap: 40px;

}

.gap-50{

    gap: 50px;

}

.gap-72{
  gap: 72px;
}
.gap-100{

  gap: 100px;

}
.gap-200{

  gap: 200px;

}

.gap-1rem{

    gap: 1rem;

}
html.no-scroll {

  overflow: hidden;

}



.image-conatiner img{

 width: 100%;

}

section{

  /* overflow: hidden; */

  width: 100vw;

  font-weight: 600;

}

h1 b{ color: var(--accent);}
h1{

    font-size: 4rem;

    color: var(--dark-text);

    font-family: 'Montserrat';

    font-weight: bold;

    line-height: 1.2;

    text-align: left;

  }

h2{

    font-size: 48px;

    font-family: 'Montserrat';

    color: var(--dark-text);

    font-weight: bold;

    font-weight: 700;


}

h3{

    font-size: 1.25rem;
    text-transform: uppercase;
    font-family: 'Montserrat';

    color: var(--accent);
    font-weight: 700;
}

h4{

    font-size: 2rem;

    font-family: 'Montserrat';

    color: var(--dark-text);

    font-weight: 600;

}

h5{

    font-size: 1.5rem;

    font-family: 'Montserrat';

    color: var(--dark-text);

    font-weight: 700;

}

h6{

  font-size: 0.875rem;

  color: var(--white-text);

  font-weight: bold;

  font-family: 'Montserrat';

}

p{
    
    font-size: 1rem;
    font-family: 'Montserrat';

    color: var(--dark-text);

    font-weight: 400;

}

a{

    font-weight: 400;
    font-family: 'Montserrat';
    color: var(--dark-text);

}
a, span{
  font-size: 16px;
  
  font-family: 'Montserrat';
  
  text-decoration: none;
  
}
@media(max-width:768px){
  h2{
    font-size: 36px;
  }
}
span{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.dark-text{

  color: var(--dark-text);

}

.dark-text{

  color: var(--dark-text);

}

.accent-text{

  color: var(--accent);

}

.dark-gray-text{

  color: var(--dark-gray-text);

}

.light-gray-text{

  color: var(--light-gray-text);

}

.image-container img{

  width: 100%;

}

.xl6-text{

  font-size: 96px;

}
.xl5-text{

  font-size: 3rem;

}

.xl4-text{

  font-size: 2.5rem;

}

.xl3-text{

    font-size: 2rem;

}

.xl2-text{

    font-size: 1.5rem;

}

.xl-text{

    font-size: 1.25rem;

}

.l-text{

    font-size: 1.13rem;

}

.m-text{

    font-size: 1rem;

}

.s-text{

    font-size: 0.875rem;

}

.xs-text{

    font-size: 0.75rem;

}
.xs2-text{

    font-size: 12px;
}

.text-center{

  text-align: center;

}

.text-left{

  text-align: left;

}

.text-right{

  text-align: right;

}
.title-text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bg-dark{

  background-color: var(--dark-background);

}

.bg-white{

  background-color: var(--white-background);

}

.bg-accent{

  background-color: var(--accent-background);

}

.max-300{

  max-width: 300px;

}

.max-450{
  max-width: 450px;
}
.max-500{

  max-width: 500px;

}

.max-1000{
  max-width: 1000px;
}
.max-1200{

  max-width: 1200px;

  margin-inline:auto;

}

.max-1440{

  max-width: 1440px !important;

  margin-inline: auto;

}

.max-1900{

  max-width: 1900px !important;

  margin-inline: auto;

}

.width-100{

  width: 100%;

}


.absolute{

  position: absolute;

}


/* header start */
header{
  position: absolute;
  width: 100vw;

  height: 75px;
  z-index: 5;
    top: 0;
  left: 0;
}
header::before{
  content: '';
  position: absolute;
  width: 100vw;
  height: 75px;
  z-index:10;
  top: 0;
  left: 0;
  filter: blur(5px);
  background: linear-gradient(to bottom ,#1f1f1f44 , #1f1f1f00);
}

.nav-header {
    position: relative;
    z-index: 7;
    background: transparent;
    height: 75px;
    padding: 20px 40px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    width: 100vw;
    max-width: 1440px;
    margin-inline:auto ;

}

.logo {
    height: 40px;
    width: auto;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px;
}

.desktop-nav li {
    width:80px;
}
.desktop-nav li a {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
}

.desktop-nav li a:hover,
.desktop-nav li a.active {
    font-weight:bold;
}

.desktop-nav li a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 7px;
    border-radius:5px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}
html[lang='ar'] .desktop-nav li a::after{
    left: unset;
    right: 0;

}
.desktop-nav li a:hover::after,
.desktop-nav li a.active::after {
    width: 22px;
   
}

.language-switcher{
    background-color: var(--accent);
    border: none;
    width: 36PX;
    height: 36PX;
    cursor: pointer;
    position: relative;
    transform: rotate(45deg);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.language-switcher a{
  transform: rotate(-45deg);
  color: #fff;
  font-weight: bold;
}

[dir="rtl"] .language-switcher a{
  font-family: "Montserrat";
}
/* Mobile Menu Toggle */
.menu-toggle {
    background-color: var(--accent);
    border: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
    position: relative;
    transform: rotate(45deg);
    transition: all 0.3s ease;
    display: none; /* Hidden by default (desktop) */
    justify-content: center;
    align-items: center;
}

.menu-toggle:hover {
    background-color: var(--accent);
}

.menu-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 21.2px;
    gap: 3.5px;
    transform: rotate(-45deg);
}

.menu-line {
    position: relative;
    width: 14.14px;
    height: 3px;
    background-color: white;
    transition: all 0.4s ease;
}

.menu-line:nth-of-type(1) {
    align-self: flex-end;
}

.menu-line:nth-of-type(2) {
    width: 20px;
}

.menu-line:nth-of-type(3) {
    align-self: flex-start;
}

/* Active state animations */
.menu-toggle.active .menu-line:nth-of-type(1) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%)  rotate(45deg)  ;
    width: 20px;
    height: 2px;

}

.menu-toggle.active .menu-line:nth-of-type(2) {
    opacity: 0;
}

.menu-toggle.active .menu-line:nth-of-type(3) {
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%)  rotate(-45deg)  ;
    width: 20px;
    height: 2px;
}

/* Mobile Styles */
@media (max-width: 900px) {
  .desktop-nav{text-align: center ; gap: 10px;}
}
@media (max-width: 768px) {
    
    .nav-header {
        padding:20px;
    }
    .desktop-nav {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
}

/* Desktop Styles */
@media (min-width: 769px) {
    .desktop-nav {
        display: flex;
    }
    
    .menu-toggle {
        display: none;
    }
}

/* Full Menu Styles (existing mobile menu) */
.full-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 176px 20px 0px 20px;
    
    background: linear-gradient(to top, #1F1F1F 0%, #FFF);
    z-index: 999;
    transform: translateX(-100%);
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.full-menu.active {
    transform: translateX(0);
}



  .full-menu.active {
      transform: translateY(0);
  }

  .menu-header {
      position: absolute;
      top: 20px;
      left: 40px;
      right: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .menu-content {
    z-index: 4;
      flex: 1;
      display: flex;
      align-items: center;
  }

  .menu-nav {
      list-style: none;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transition-delay: 0.3s;
  }

  .full-menu.active .menu-nav {
      opacity: 1;
      transform: translateY(0);
  }

  .menu-nav li {
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .full-menu.active .menu-nav li:nth-child(1) {
      transition-delay: 0.4s;
      opacity: 1;
      transform: translateY(0);
  }

  .full-menu.active .menu-nav li:nth-child(2) {
      transition-delay: 0.5s;
      opacity: 1;
      transform: translateY(0);
  }

  .full-menu.active .menu-nav li:nth-child(3) {
      transition-delay: 0.6s;
      opacity: 1;
      transform: translateY(0);
  }

  .full-menu.active .menu-nav li:nth-child(4) {
      transition-delay: 0.7s;
      opacity: 1;
      transform: translateY(0);
  }

  .full-menu.active .menu-nav li:nth-child(5) {
      transition-delay: 0.8s;
      opacity: 1;
      transform: translateY(0);
  }

  .menu-nav a {
      text-decoration: none;
      color: #333;
      font-size: 2rem;
      font-weight: 300;
      line-height: 1.2;
      transition: color 0.3s ease;
  }

  .menu-nav a:hover {
      color: var(--accent);
  }

  .menu-nav a.active {
    font-weight: bold;
  }

  .menu-visual {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0%;
      bottom: 0;
      width: 100%;
  }

  .mobile-menu-background {
    width: 100%;
    position: relative;
    mix-blend-mode: soft-light;

  }

  .full-menu .contact-info {
      position: absolute;
      bottom: 10px;
      left: 20px;
      text-align: right;
      font-size: 14px;
      color: #666;
  }


  /* Desktop indicator */
  .desktop-indicator {
      position: absolute;
      top: 10px;
      left: 15px;
      font-size: 12px;
      color: #999;
  }

  .menu-state-indicator {
      position: absolute;
      top: 10px;
      left: 15px;
      font-size: 12px;
      color: #999;
  }
/* header end */

/********************************** homepage start  **********************************/
/* hero section start */
  .hero-section-container{
    background-color: #FAF8F8;
    width: 100vw;
  }
  .hero-section{
    overflow: hidden;
    height: calc( 100vh - 75px);
    width: 100vw;
    max-height: 1024px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-inline:auto;
    z-index: 3;
  }
  .hero-section .boxes-background{

    width: 1440px;
    position: absolute;
    right: 0;
    z-index: 4;
    /* background: url('../assets/images/homepage/hero-boxes.webp');
    background-repeat: no-repeat;
    background-position: right; */
    pointer-events: none;
    -webkit-user-drag: none;
    mix-blend-mode:soft-light;
    
  }
  .hero-section .lines-background{
    width: 1440px;
    position: absolute;
    right: 0;
    z-index: 4;
    /* background: url('../assets/images/homepage/hero-lines.webp');
    background-repeat: no-repeat;
    background-position: right; */
    pointer-events: none;
    -webkit-user-drag: none;
  }
    .hero-swiper {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
    }

    .hero-swiper .swiper-slide {
      display: flex !important;
      align-items: flex-end;
      justify-content: flex-start;
      font-size: 2rem;
      color: #ffffff;
      position: relative;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      z-index: 0;
    }
    .hero-swiper .swiper-slide .inner-container{
      padding-bottom: 250px;
      padding-inline: min(5%, 100px);
      position: relative;
      z-index: 5;
    }
    
    .hero-swiper .swiper-slide h1{
      margin-bottom: 16px;
      font-weight: normal;
      max-width: 800px;
    }
    .hero-swiper .swiper-slide p{
      max-width: 700px;
      width: 100%;
      margin-bottom: 3rem;
      max-width: 600px;      
    }
    .hero-swiper .swiper-slide a{
      padding:15px 60px ;
      width: 150px;
      height: 40px;
      background-color: var(--accent);
      color: white;
    }
    .hero-swiper .slide1::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background-image: url('../assets/images/homepage/hero-slide-1.webp');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }

    .hero-swiper .slide2::before {
    position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background-image: url('../assets/images/homepage/hero-slide-2.webp');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1; }

    .hero-swiper .slide3::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background-image: url('../assets/images/homepage/hero-slide-3.webp');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
     }

    .hero-swiper .swiper-horizontal>.swiper-pagination-bullets,.hero-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,.hero-swiper .swiper-pagination-custom,.hero-swiper .swiper-pagination-fraction{
        bottom: 200px !important;
        left: calc( min(100px, 5%) - 10px ) !important;
        width: 120px !important;
      }
    html[lang='ar'] .hero-swiper .swiper-pagination{
      right: calc( min(100px, 5%) - 10px ) !important;
      left: unset;
    }
    @media(max-width:768px){
        .hero-swiper .swiper-horizontal>.swiper-pagination-bullets,.hero-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,.hero-swiper .swiper-pagination-custom,.hero-swiper .swiper-pagination-fraction{
            left:14px !important; 
        }
        .hero-swiper .swiper-horizontal>.swiper-pagination-bullets, .hero-swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .hero-swiper .swiper-pagination-custom, .hero-swiper .swiper-pagination-fraction { 
            bottom: 70px !important;
         }
         .hero-swiper .swiper-slide p{
             font-size:16px;
         }
    }
    .hero-swiper .swiper-pagination .swiper-pagination-bullet {
      width: 16px;
      height: 7px;
      background-color: #1F1F1F;
      opacity:0.6;
      border-radius: 0;
      margin: 0 8px;
    } 

    .hero-swiper .swiper-pagination .swiper-pagination-bullet-active {
      opacity: 1;
      width: 46px;
    }
    @media(max-width: 768px){
    .hero-section{
      height: 100vh;
    }
    .hero-swiper .swiper-slide h1{
      font-size: 32px;
    }
    .hero-swiper .swiper-slide .inner-container{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 140px;
            padding-bottom: 100px;
      
    }
    .hero-swiper .swiper-slide a{
      font-size: 14px;
      padding: 10px 0;
      text-align: center;
    }
    .hero-swiper .swiper-pagination{
      width: 138px !important;
      bottom: 70px !important;
    }
    .hero-swiper .swiper-pagination .swiper-pagination-bullet{
      width: 15px;
      background-color:  var(--dark-background);
      border-radius: 10px;
    }
    .hero-swiper .swiper-pagination .swiper-pagination-bullet-active{
      width: 42px;
    }
  }
/* hero section end */
/* about section start */

        .about-section{
            position: relative;
            background: #FAF8F8;
            width: 100vw;
          overflow-x: clip;

            /* background-image:url('../assets/images/homepage/about-lines.webp');
            background-repeat: no-repeat;
            background-position: right; */
        }
        .about-backgrounds{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 4;
        }
        .about-top-lines-background{
          position: absolute;
          top: 0;
          right: 0;
        }
        .about-services-line-background{
          position: absolute;
          bottom: -588px;
          right: -166px;
        }
        .vertical-cards-section {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .vertical-cards-section .cards-container {
            display: flex;
            justify-content: flex-start;
            gap: 20px;
            max-width: 630px;
            height: 566px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .vertical-cards-section .vertical-card {
            position: relative;
            cursor: pointer;
            transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 566px;
        }
        .vertical-cards-section .vertical-card.active::after{
            content: '';
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            background: linear-gradient(to top, #D6980D 0%, #D6980D00 40%);
            pointer-events:none;
         }
        .vertical-cards-section .vertical-card-1 {
            background: url('../assets/images/homepage/our-vision.webp');
            width: 120px;
        }

        .vertical-cards-section .vertical-card-2 {
            background: url('../assets/images/homepage/our-mission.webp');
            width: 390px;
        }

        .vertical-cards-section .vertical-card-3 {
            background: url('../assets/images/homepage/our-values.webp');
            width: 120px;
        }

        .vertical-cards-section .vertical-card.active {
            width: 390px;
        }

        .vertical-cards-section .vertical-card:not(.active) {
            width: 120px;
        }

        .vertical-cards-section .vertical-card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index:1;
            padding: 40px 20px;
            color: white;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            align-content: center;
            justify-content: space-between;
        }

        .vertical-cards-section .vertical-card:not(.active) .vertical-card-content {
           
            bottom: 40px;
            top: 40px;
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 40px 20px;
            
        }
        .vertical-cards-section .vertical-card:not(.active) .vertical-card-icon
        .vertical-cards-section .vertical-card.active .vertical-card-content {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            display: none;
        }

        .vertical-cards-section .vertical-card-text-section {
            display: flex;
            flex-direction: column;
        }

        .vertical-cards-section .vertical-card-title {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 8px;
            opacity: 1;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            width: 300px;

        }

        .vertical-cards-section .vertical-card:not(.active) .vertical-card-title {
            transform: rotate(-90deg);
            font-size: 2rem;
            margin-bottom: 0;
            white-space: nowrap;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            padding-left: 70px
        }

        .vertical-cards-section .vertical-card-subtitle {
            color: #fff;
            font-size: 1rem;
            margin-bottom: 0;
            opacity: 0.9;
            transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
            transform: translateY(0);
        }

        .vertical-cards-section .vertical-card:not(.active) .vertical-card-subtitle {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .vertical-cards-section .vertical-card-icon {
           
            position: absolute;
            top: 57px;
            right: 10px;
            
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s, scale 0.6s ease 0.15s;
            transform: scale(1);
            opacity: 1;
            cursor: pointer;
            align-self: center;
        }
        html[lang="ar"] .vertical-cards-section .vertical-card-icon{
            left: 10px;
            top: 62px;

            right: unset;
            transform: rotate(180deg);
        }

        .vertical-cards-section .vertical-card:not(.active) .vertical-card-icon {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease, scale 0.3s ease;
        }

        .vertical-cards-section .vertical-card-icon svg rect{
            transition: all 1s ease;
        }
        .vertical-cards-section .vertical-card-icon:hover svg rect{
            fill: var(--dark-background);
            stroke:none;
            
        }

        .vertical-cards-section .arrow-icon {
            width: 20px;
            height: 20px;
            stroke: white;
            stroke-width: 2;
        }

        .vertical-cards-section .text-content {
            flex: 1;
            max-width: 500px;
            padding-left: 0;
        }

        .vertical-cards-section .text-content h3.about-title {
            margin-bottom: 4px;
            letter-spacing: 1px;
            transition: transform 0.6s ease 0.3s, opacity 0.6s ease 0.3s;
            transform: translateY(0);
            opacity: 1;
            text-transform: uppercase;
        }

        .vertical-cards-section .text-content h2.about-subtitle {
            color: #000;
            font-weight: 700;
            margin-bottom: 32px;
            line-height: 1.2;
            transition: transform 0.7s ease 0.4s, opacity 0.7s ease 0.4s;
            transform: translateY(0);
            opacity: 1;
        }

        .vertical-cards-section .text-content p.about-text {
            color: #000;
            line-height: 1.7;
            transition: transform 0.8s ease 0.5s, opacity 0.8s ease 0.5s;
            transform: translateY(0);
            opacity: 1;
            font-size: 1.25rem;
        }

        .vertical-cards-section .text-content.updating h3,
        .vertical-cards-section .text-content.updating h2,
        .vertical-cards-section .text-content.updating p {
            transform: translateY(-10px);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        @media(max-width: 1000px){
          .vertical-cards-section{
            flex-direction: column;
          }
          .vertical-cards-section .cards-container{
            margin-bottom: 20px;
          }
          .vertical-cards-section .vertical-card-icon {
              top:80px;
              right: 10px;
              width: 50px;
              height: 50px;
            }
            html[lang='ar'] .vertical-cards-section .vertical-card-title{
              width: 235px;
            }
        }
        @media (max-width: 768px) {
          .hero-section{
            overflow: hidden;
          }
          .hero-section .boxes-background{
            height: 100%;
            width: unset;
            right: -50%;
          }
          .hero-section .lines-background{
            height: 100%;
            width: unset;
            right: -50%;
          }
           .about-top-lines-background{
              position: absolute;
              top: 0;
              right: 0;
              width: 50vw;
            }
            .about-services-line-background{
              position: absolute;
              bottom: -588px;
              right: -166px;
              width: 50vw;
            }
            .vertical-cards-section {
                flex-direction: column;
                gap: 20px;
            }
            
            .vertical-cards-section .cards-container{
              height: 366.5px;
            }
             .vertical-cards-section .vertical-card{
            height: 366.5px;
          }
          .vertical-cards-section .vertical-card.active{
            width: 268px;
          }
          .vertical-cards-section .vertical-card:not(.active){
            width: 60px;
          }
          .vertical-cards-section .cards-container{
            gap: 12px;
          }
        }
        @media (max-width: 420px) {
           .vertical-cards-section .cards-container{
              height: 366.5px;
            }
         
          .vertical-cards-section .vertical-card.active{
            width: 214.4px;
          }
          .vertical-cards-section .vertical-card.active .vertical-card-title {
            width: 180px;
          }
          .vertical-cards-section .vertical-card:not(.active){
            width: 48px;
          }
          .vertical-cards-section .cards-container{
            gap: 9.6px;
          }
        }
/* about section end */

/* services section start */
.swiper-container {
  overflow: hidden;
}
.services-section-container{
  width: 100vw;
  overflow: hidden;
}
.services-bottom-lines-background{
  position: absolute;
  bottom: -200px;
  left: -166px;
}
.services-section{
  max-width: 1440px;
  width: 100%;
  color: var(--white-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3rem;
}
.services-section .section-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.services-section .section-header p{
  color: #1f1f1f;
  max-width: 834px;
  text-align: center;
  margin-bottom: 20px;
  
}

.services-swiper{
  overflow: hidden;
}
.swiper-wrapper{
  width: 100%;
  align-items: flex-start !important;
}


.services-section .services-swiper{
  height: 500px;
  justify-content: flex-start;
}
 .services-section .service-card{
    align-self: start !important;
  flex-shrink: 0;
  position: relative;
  height: 330px;
  /* height: 420px; */
  overflow: hidden;
  width: 420px;
  padding: 30px 30px 30px 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px !important;
  align-self: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  background-color: #1f1f1f;
  clip-path: polygon(0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
  transition: all .4s ease;

}
 html[lang="ar"] .services-section .service-card{
clip-path: polygon(0% 15%, 15% 0, 100% 0, 100% 100%, 0% 100%);
 }
 .services-section .service-card:hover{
  height: 430px;
  background-color: #1F1F1F;
 }
 .services-section .service-card:hover .text-container p{
  color: #fff;
 }

.services-section .service-card .text-container{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.swiper-slide.service-card{
  background-color: #FAF8F8;
}
 .service-card h3 ,
 .service-card p,
 .service-card .image-container{
  position: relative;
  z-index: 1;
}
 /* .service-card .card-background{

  background-color: #1f1f1f;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

} */
 .service-card .card-icon{
   height: 60px;
   width: 60px;
   flex-shrink: 0;
   transition:fill .4s ease;
  }
  .service-card:hover .card-icon path{
    fill: #fff;
  }
 .service-card .card-icon .primary-fill{
   fill: var(--accent);
 
  }
  .service-card .card-icon .secondary-fill{
    fill: #fff;
    transition: fill .4s ease;
  }
  .service-card.swiper-slide-next .card-icon .secondary-fill{
    fill: #1f1f1f;
  }
 .service-card .image-container{
  width: 100%;
}
/* .slider-nav{
  justify-content: flex-end;
  gap: 2rem;
  margin-top: 5rem;
  margin-right: 15px;
}
.slider-nav .custom-next img, .slider-nav .custom-prev img{
  width: 15px;
} */

.services-section h5{
  color: #000;
  line-height: 1.5;
  height: 75px;
}
 .service-card p{
   line-height: 1.3;
   font-size: 1.13rem;
  }
 .service-card:hover h5{
  color: var(--accent);
}
  .service-card p{
    color: #1F1F1F;
    height: 110px;
  }
 .service-card .diamond {
  flex-shrink: 0;
  align-self: flex-end;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.5); /* white with 50% opacity */
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s ease;
}
 html[lang="ar"] .service-card .diamond{
     align-self:flex-start;
 }
.service-card .diamond:hover{
  background-color: #fff;
  border:none;
  cursor: pointer;
}
.service-card .diamond .arrow {
  color: white;
  font-size: 24px;
  transform: rotate(-45deg); /* cancel the rotation for the content */
}
html[lang="ar"] .service-card .diamond .arrow {
  transform: rotate(135deg); /* cancel the rotation for the content */

}
.service-card .diamond svg path{
  stroke: #fff;
}
.service-card .diamond:hover svg path{
  stroke: #1f1f1f;
}

@media (max-width: 1300px) and (min-width: 1100px) {
  .services-section{
    font-size: 12px;
  }
}
@media (max-width: 1100px) {
  .services-section{
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .services-section .section-header{
    align-items: flex-start;
    text-align: left;
  }
  .services-section .section-header p{
    text-align: left;
  }
  html[lang='ar'] .services-section .section-header p{
    text-align: right;
  }
  .services-section .service-card{
    width: 100%;
    height: 410px;
    background-color: #1f1f1f;
    clip-path: polygon(0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);

  }
  .service-card .card-icon path{
    fill: #fff;
  }
  .services-section .service-card h5{
    height: 60px;
    color: var(--accent);
    font-size: 1.7rem;
  }
  .services-section .service-card p{
    height: 90px;
    line-height: 1.7;
  }
  .services-section .service-card p{
    color: #fff;
  }
  
}
/* Pagination Styling */
.services-swiper .swiper-pagination {
    position: relative;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.services-swiper .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background-color: #E0E0E0;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}

.services-swiper .swiper-pagination-bullet {
  background-color: rgba(214, 152, 13, 0.3);
  width: 16px; /* Make active dash longer */
  height: 7px;
  border-radius: 20px;
}
.services-swiper .swiper-pagination-bullet-active {
  background-color: var(--accent);
  width: 46px; /* Make active dash longer */
}

.services-swiper .swiper-pagination-bullet:hover {
    background-color: var(--accent);
    opacity: 0.7;
}
/* Position pagination below the slider */
.services-swiper {
    overflow: hidden;
    padding-bottom: 3rem; /* Add space for pagination */
}
/* services section end */
/* clients section start */
  .clients-section-container{
        width: 100vw;
        background: #FAF8F8;
        /*height: 600px;*/
        height: 745px;
        overflow: hidden;
        direction: ltr;
    }
      html[lang="ar"]  .clients-section-container{
          direction :rtl;
      }
    .clients-section.container{
        padding-top: 120px;
    }
    .clients-section{
        height: 100%;
        width: 100%;
        max-width: 1440px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: end;
        justify-content: center;
    }
    .client-boxes-container{
          position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-end;
        justify-content: center;
    }
  
    .clients-section .title{
        position: absolute;
        left: min(5% , 50px);
        top: 30px;
    }
    html[lang="ar"] .clients-section .title{
        right: min(5% , 50px);
        left:unst;
    }
    .clients-section .title p{
        width: 460px;
    }
    .clients-section .client-boxes-row{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 145px;
        flex-wrap: nowrap;
        width: 100%;
        
    }
    .clients-section .client-boxes-row:nth-child(odd) { 
        margin-right: 145px
    }
    html[lang="ar"] .clients-section .client-boxes-row:nth-child(odd) { 
        margin-left: 145px;
        margin-right: 0;
    }
    .clients-section .client-box{
        position: relative;
        background:rgba(255,255,255,0.5);
        width: 145px;
        height: 145px;
        display: flex;
        justify-content: center;
        align-items: center;
        direction: ltr;
    }
    .clients-section .client-boxes-row:first-of-type .client-box,
    .clients-section .client-boxes-row:last-of-type .client-box {
        background: #FCFBFB;
        opacity: 0;
    }

    .clients-section .client-boxes-row:first-of-type .client-box:nth-of-type(1),
    .clients-section .client-boxes-row:last-of-type .client-box:nth-of-type(1),
    .clients-section .client-boxes-row:last-of-type .client-box:nth-of-type(3) {
        opacity: 1;
    }
    .clients-section .client-box img{
        width: 100%
    }
    /* nodes */
    .cross-lines {
        position: absolute;
        
        width: 200px;
        height: 200px;
    }
    .clients-section .cross-lines.top-left {
        top: -100px;
        left: -100px;
    }
    .clients-section .cross-lines.top-right {
        top: -100px;
        left: -100px;
        right: -200px;
        height: 200px;

    }
    /* .clients-section .cross-lines.top-right .line.horizontal{
        left:50px
    } */
    .clients-section .cross-lines.bottom-right {
        bottom: -100px;
        right: -100px;
        width: 200px;
        height: 200px;
    }
    .clients-section .cross-lines.bottom-left {
        bottom: -100px;
        left: -100px;
    }
    .clients-section .line.horizontal {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, #d999108b 20%, transparent);
      transform-origin: center;
      animation: draw-h 3s ease-in-out infinite;
      animation-delay: calc(var(--d, 0s) + .15s);
    }
    .clients-section .cross-lines { --d: 0s; }          /* default */
    .clients-section .cross-lines.top-left    { --d: 0s; }
    .clients-section .cross-lines.top-right   { --d: .8s; }
    .clients-section .cross-lines.bottom-right{ --d: 1.6s; }
    .clients-section .cross-lines.bottom-left { --d: 2.3s; }
    .clients-section .line.vertical {
      position: absolute;
      left: 50%;
      top: 0;
      height: 100%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, #d999108b 20%, transparent);
      transform-origin: center;
      animation: draw-v 3s ease-in-out infinite;
      animation-delay: calc(var(--d, 0s) + .45s); /* slight internal offset */
    }

    .clients-section .yellow-node {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6px;
        height: 6px;
        background-color: #D99B10;
        transform: translate(-50%, -50%) rotate(45deg);
        z-index:15;
        animation: node-pulse 3s ease-in-out infinite;
        animation-delay: var(--d, 0s);
    }
    
    /* optional: animate the long row line too */
    .clients-section .row-horizontal-line {
      background: linear-gradient(to right, transparent, #d999108b, transparent);
      width: 100%;
      height: 1px;
      position: absolute;
      bottom: 0;
      transform-origin: left center;
      animation: sweep 4s ease-in-out infinite;
    }

      /* keyframes */
      @keyframes node-pulse{
        0%  { transform: translate(-50%,-50%) rotate(45deg) scale(.6);  }
        10% { opacity: 1; }
        25% { transform: translate(-50%,-50%) rotate(45deg) scale(1.2); }
        40% { transform: translate(-50%,-50%) rotate(45deg) scale(1); }
        90%{ transform: translate(-50%,-50%) rotate(45deg) scale(1);  }
        100%{ transform: translate(-50%,-50%) rotate(45deg) scale(.6);  }
      }
      @keyframes draw-h {
        0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
        15%  { opacity: 1; }
        70%  { opacity: 1; }
        100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
      }
      @keyframes draw-v {
        0%   { transform: translateX(-50%) scaleY(0); opacity: 0; }
        15%  { opacity: 1; }
        70%  { opacity: 1; }
        100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
      }
      @keyframes sweep {
        0%   { transform: scaleX(0); opacity: 0; }
        15%  { opacity: 1; }
        70%  { opacity: 1; }
        100% { transform: scaleX(1); opacity: 0; }
      }

      /* accessibility */
      @media (prefers-reduced-motion: reduce) {
        .clients-section .line.horizontal,
        .clients-section .line.vertical,
        .clients-section .row-horizontal-line { animation: none; }
      }
    .clients-section .row-horizontal-line.left-row-line {
        width: 500px;
        left: -0;
        bottom: 0;
    }
    @media(max-width:1320px){
        .clients-section-container{
            /*height: 450px;*/
            height: 560px;
        }
        .clients-section .client-boxes-row{
            gap: 110px;
            
        }
        .clients-section .client-boxes-row:nth-child(odd) { 
            margin-right: 110px;
        }
        html[lang="ar"] .clients-section .client-boxes-row:nth-child(odd) { 
            margin-left: 110px;
            margin-right: 0;
        }
        .clients-section .client-box{
            width: 110px;
            height: 110px;
        }
    }
    @media(max-width:1000px){
        .clients-section .client-boxes-row{
            gap: 85px;
            
        }
        .clients-section .client-boxes-row:nth-child(odd) { 
            margin-right: 85px;
        }
         html[lang="ar"] .clients-section .client-boxes-row:nth-child(odd) { 
            margin-left: 85px;
            margin-right: 0;
        }
        .clients-section .client-box{
            width: 85px;
            height: 85px;
        }
         .clients-section-container{
            /*height: 380px;*/
            height: 465px;
        }
    }
    @media(max-width:768px){
      html[lang="ar"] .clients-section .title{
        right: unset;
      }
      .clients-section{
          align-items:center;
      }
        .clients-section .client-boxes-row:first-of-type .client-box, .clients-section .client-boxes-row:last-of-type .client-box{
            opacity: 1;
            background: #fff;
        }
     
        .clients-section .cross-lines,
        .clients-section .row-horizontal-line{
            display: none
        }
        .clients-section .title{
            position: relative;
        }
        .clients-section-container{
            height: 708px;
        }
        .clients-section{
            width: 440px;
            text-align: center
        }
        .clients-section .title{
            position: relative;
            top: unset;
            left: unset;
        }
        .clients-section .title p{
            width: 370px;
        }
         .client-boxes-container{
             width: 425px
            }
        .clients-section .client-boxes-row{
             justify-content: flex-end
        }
        .clients-section .client-boxes-row:first-of-type, .clients-section .client-boxes-row:last-of-type {
            justify-content:center;
            margin-right:0;
            margin-left:0 !important;
        }
        .clients-section .client-boxes-row:nth-child(odd){
            margin-right:0;
        }
        html[lang="ar"] .clients-section .client-boxes-row:nth-child(odd){
            
            margin-right:0;
            margin-left:0;
        }
        html[lang="ar"] .clients-section .client-boxes-row:nth-child(even){
            margin-left:85px;
            margin-right:0;
        }
        .clients-section .client-boxes-row:nth-child(even){
            margin-right:85px;
        }
        .clients-section.container{
            padding-top:25px;
        }
        .clients-section-container{
            height:860px;
        }
        .clients-section.container{
            gap:0;
        }
    }
    @media(max-width:440px){
       
        .clients-section-container{
            height: fit-content;
            padding: 50px 0;
        }
        .clients-section{
            width: 100%;
        }
        .clients-section .title p{
            max-width: 370px;
            width: 100%;
        }
        .client-boxes-container{
            width: 100%;
        }
        .clients-section .client-boxes-row{
             justify-content: flex-end
        }

         .clients-section .client-boxes-row{
            gap: calc(( 100vw - 32px ) / 5);
            
        }
        .clients-section .client-boxes-row:nth-child(odd) { 
            margin-right: calc(( 100vw - 32px ) / 5);
        }
          html[lang="ar"] .clients-section .client-boxes-row:nth-child(even) { 
            margin-left:  calc(( 100vw - 32px ) / 5);
            margin-right: 0;
        }
        .clients-section .client-box{
            width: calc(( 100vw - 32px ) / 5);
            
            height: calc(( 100vw - 32px ) / 5);
        }
    }

/* clients section end */
/* projects section start */

        .projects-section-container{
          width: 100vw;
        }

        .projects-section {
            width: 100%;
            overflow: hidden;
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 60px;
            position: relative;
          }

        .projects-section .project-content {
           width: 500px;
            max-width: 500px;
            z-index: 10;
        }
        html[lang = 'ar'] .projects-section .project-content{
            width:400px;
        }
        .projects-section .project-content .subtitle {
            margin-bottom: 16px;
        }

        .projects-section .project-content h2 {
            margin-bottom: 12px;
            line-height: 1.2;
            transition: all 0.6s ease;
        }

        .projects-section .project-content .description {
          color: #1f1f1f;
          line-height: 1.6;
          margin-bottom: 20px;
          transition: all 0.6s ease;
        }
     

        .projects-section .project-detail {
            margin-bottom: 12px;
            display: flex;
            align-items:flex-start;
            gap: 10px;
        }
         html[lang="ar"] .projects-section .project-detail{
              direction:rtl;       
        }
        .projects-section .project-detail:last-of-type {
          margin-bottom: 30px;
        }

        .projects-section .project-detail .label {
            color: #D6980D;
            font-weight: 700;
            margin-bottom: 4px;
            margin-top: -3px;
        }

        .projects-section .project-detail .value {
            line-height: 1.5;
        }

        

        .projects-section .images-container {
           
            position: relative;
            height: 620px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .projects-section .project-image {
            position: absolute;
            /* border-radius: 12px; */
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
        }

        .projects-section .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.4s ease;
        }

        .projects-section .project-image {
            width: 520px;
            max-height: 390px;
          transition: all .4s ease;
        }
        .projects-section .project-image.active {
            width: 520px;
            max-height: 390px;
            z-index: 5;
            transform: translateX(0);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .projects-section .project-image.next {
            width: 342px;
            max-height: 219px;
            z-index: 3;
            transform: translateX(350px) scale(0.85);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .projects-section .project-image.next-2 {
            width: 264px;
            max-height: 205px;
            z-index: 2;
            transform: translateX(550px) scale(0.7);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .projects-section .project-image.next.no-background::after {
          background:none;
        }
        .projects-section .project-image.next::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: var(--after-width, 100%);
            height: 100%;
            background: linear-gradient(to right, #1F1F1F 40%, transparent 100%);
            transition: all 0.4s ease;
        }

        .projects-section .project-image.next-2::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #1F1F1F 40%, transparent 100%);
            transition: all 0.4s ease;
        }

        .projects-section .project-image.hidden {
            opacity: 0;
            transform: translateX(300px) scale(0.6);
            z-index: 1;
        }

        .projects-section .navigation-arrows {
            position: absolute;
            bottom: 20px;
            right: 20px;
            display: flex;
            gap: 0;
            z-index: 10;
        }

        .projects-section .nav-arrow {
            height: 48px;
            width: 48px;
            background-color: transparent;
            border: none;
            color: var(--accent);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .projects-section .nav-arrow svg path{
            transition: all 0.3s ease;
        }
        .projects-section .nav-arrow:hover svg path{
          stroke: #fff;
        }
        .projects-section .nav-arrow:hover {
            background-color: #D6980D;
            color: #fff;
            transform: scale(1.1);
        }

        .projects-section .nav-arrow:disabled {
            background-color: rgba(0, 0, 0, 0.3);
            cursor: not-allowed;
            transform: scale(1);
        }

        /* .projects-section .content-updating {
            opacity: 0;
            transform: translateX(-20px);
            transition: all .4s ease;
        } */
       .projects-section .project-content h2,
        .projects-section .project-content .description,
        .projects-section .project-content .project-detail .value {
            overflow: hidden;
        }
        
        @media (max-width: 1280px) {
            html[lang="en"] .projects-section{
                gap:40px;
            }
            
           .projects-section .project-image.active {
                width: 416px;
                max-height: 312px;
            }

            .projects-section .project-image.next {
                width: 273.6px;
                max-height: 206px;
                transform: translate(250px);
               
            }
           
            .projects-section .project-image.next-2 {
                width: 211.2px;
                max-height: 159px;
                transform: translate(400px);

            }
        }
         
        @media (max-width: 1100px) {
         .projects-section .project-content{
          width: 400px;
         }
           .projects-section .project-image.active {
                width: 416px;
                max-height: 312px;
            }

            .projects-section .project-image.next {
                width: 273.6px;
                max-height: 206px;
                        transform: translate(190px);
               
            }
           
            .projects-section .project-image.next-2 {
                width: 211.2px;
                max-height: 159px;
                transform: translate(290px);

            }
        }
        @media (max-width: 768px) {
          .projects-section-container{
            margin-bottom: 30px;
          }
        .projects-section .project-content{
          width: 100%;
        }
           .projects-section {
                flex-direction: column;
                padding: 40px 20px;
                gap: 40px;
                /* height: 600px; */
                /* min-height: 600px; */
            }
            .projects-section .project-content {
                max-width: 100%;
                text-align: left;
            }
            .projects-section .project-content h2,
            .projects-section .project-content h3,
            .projects-section .project-content p{
              text-align: left;
            }
            html[lang="ar"] .projects-section .project-content h2,
            html[lang="ar"] .projects-section .project-content h3,
            html[lang="ar"] .projects-section .project-content p,
            html[lang="ar"] .projects-section .project-content {
              text-align: right;
            }
            /*.projects-section .project-content h2 {*/
            /*    font-size: 2rem;*/
            /*}*/

            .projects-section .images-container {
                /* height: 350px; */
                width: 100%;
                margin-inline: auto;
                height: fit-content;
                height: 170px;
                align-items: center;
                margin-top: 40px;
            }
            .projects-section .project-content{
              width: 100%;
            }
            .projects-section .project-image.active {
                height: unset;
                width: 80%;
                max-height: 200px;
                max-width: 265px;
            }

            .projects-section .project-image.next {
                height: unset;
                width: 55%;
                transform: unset;
                left: 100px;
                max-width: 239px;
            }
           
              .projects-section .project-image.next-2 {
                height: unset;
                width: 45%;
                /* height: 310px; */
                 transform: unset;
                left:225px;
                max-width: 179px;
              }

            .projects-section .navigation-arrows {
                bottom: 0px;
                right: 0;
                transform: unset;
            }
            
            
            html[lang="ar"] .projects-section .images-container{
                justify-content:flex-end;
            }
            html[lang="ar"] .projects-section .project-image.next{
                left:unset;
                right:100px;
            }
            html[lang="ar"] .projects-section .project-image.next-2{
                left:unset;
                right:225px;
            }
            html[lang="ar"]  .projects-section .project-image.next::after{
                background: linear-gradient(to left, #1F1F1F 40%, transparent 100%);
            }
            html[lang="ar"]  .projects-section .project-image.next-2::after{
                background: linear-gradient(to left, #1F1F1F 40%, transparent 100%);
            }
            html[lang="ar"]  .projects-section .navigation-arrows{
                left:0;
                bottom:0;
                right:unset;
            }
            
        }
         @media (max-width: 480px) {
             .projects-section .images-container {
                /* height: 350px; */
                width: 100%;
                margin-inline: auto;
                height: fit-content;
                height: 170px;
                align-items: center;
 
            }
            .projects-section .project-content{
              width: 100%;
            }
            .projects-section .project-image.active {
                height: unset;
                width: 80%;
                max-height: 200px;
                max-width: 265px;
            }

            .projects-section .project-image.next {
                height: unset;
                width: 55%;
                transform: unset;
                left: 32%;
                max-width: 239px;
            }
           
              .projects-section .project-image.next-2 {
                height: unset;
                width: 45%;
                /* height: 310px; */
                 transform: unset;
                left: 50%;
                max-width: 179px;
              }

            .projects-section .navigation-arrows {
                bottom: 0px;
                right: 0;
                transform: unset;
            }
            
            
            html[lang="ar"] .projects-section .images-container{
                justify-content:flex-end;
            }
            html[lang="ar"] .projects-section .project-image.next{
                left:unset;
                right:32%;
            }
            html[lang="ar"] .projects-section .project-image.next-2{
                left:unset;
                right:50%;
            }
            html[lang="ar"]  .projects-section .project-image.next::after{
                background: linear-gradient(to left, #1F1F1F 40%, transparent 100%);
            }
            html[lang="ar"]  .projects-section .project-image.next-2::after{
                background: linear-gradient(to left, #1F1F1F 40%, transparent 100%);
            }
            html[lang="ar"]  .projects-section .navigation-arrows{
                left:0;
                bottom:0;
                right:unset;
            }
         }
/* projects section end */
/* certification section start */

    .certification-section-container{
      overflow: hidden;
        background: #1f1f1f;
        height: 620px;
        width: 100vw;
        position: relative;
        z-index:5;
        overflow: hidden;
    }
    .certification-section-container .background{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
        max-width: 1440px;
        height: 609px;
    }
    .certification-section-container .background img{
        height:100%;
    }
    .certification-section{
        position: relative;
        z-index: 1;
        max-width: 1440px;
        width: 100vw;
        height: 100%;
        padding-top: 55px;

        /* background: url('../assets/images/homepage/certification/background.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain; */

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 44px;
 
        text-align: center;
    }
    
    .certification-section .section-header{
    }
  
    .certification-section .section-header h2{
        color: #fff;
    }
  .certificates-container{
        width: 95vw;
        max-width: 972px;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-52%);
        z-index: 1;
    }
    .certificate-container{
        display: flex;
        width: 100%;
        text-align: left;
        /* padding: 10px; */
        height: 140px;
        gap: 0;

       
    }

    .first-certificate{

    }
    .second-certificate{
        flex-direction: row-reverse
    }
    .certificate-container .image-container{
        flex-shrink: 0;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .certificate-container .image-container img{
        width: 97px;
    }
    .certification-section .text-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #2A2A2A;
        padding: 16px 10px;
         position: relative;
    }
    .top-right-corner-node{
        position: absolute;
        right: -168.5px;
        top: -48px;
    }
    .bottom-left-corner-node{
        position: absolute;
        left: -149.5px;
        bottom: -47px;
    }
    .certification-section .text-container p{
        color: #fff
    }
    html[lang="ar"] .certification-section .text-container p{
        text-align: right;
    }
    .certification-section .text-container p span{
        color: #D6980D;
    }
    /* main box */
    .certification-section-container .main-box{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    /* lines */
    .certification-section-container .main-box .white-node  {
        position: absolute;
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
        background-color: #fff;
    }
    .certification-section-container .main-box > .cross-lines  {width: 25%; aspect-ratio: 1;}
    .certification-section-container .main-box > .cross-lines.center  {top: 50%; left: 50%; transform: translate(-50%, -50%) }
    .certification-section-container .main-box > .cross-lines.top-left  {top: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.top-right  {top: 0; right: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-left  {bottom: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-right  {bottom: 0; right: 0;}
    
    .certification-section-container .main-box > .cross-lines.center .white-node  {top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg) }
    .certification-section-container .main-box > .cross-lines.top-left .white-node  {top: -3px; left: -3px;}
    .certification-section-container .main-box > .cross-lines.top-right .white-node  {top: -3px; right: -3px;}
    .certification-section-container .main-box > .cross-lines.bottom-left .white-node  {bottom: -3px; left: -3px;}
    .certification-section-container .main-box > .cross-lines.bottom-right .white-node  {bottom: -3px; right: -3px;}
          
   
      
    .certification-section-container .main-box > .cross-lines .line.horizontal  {position: absolute; width: 201%; height: 1px;}
    .certification-section-container .main-box > .cross-lines.right .line.horizontal  {background: linear-gradient(to right, transparent, #fff 20%, transparent);}
    .certification-section-container .main-box > .cross-lines.left .line.horizontal  {background: linear-gradient(to left, transparent, #fff 20%, transparent);}
    .certification-section-container .main-box > .cross-lines.center .line.horizontal  {top: 50%; left: 50%; transform: translate(-50%, -50%)  }
    .certification-section-container .main-box > .cross-lines.top-left .line.horizontal  {top: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.top-right .line.horizontal  {top: 0; right: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-left .line.horizontal  {bottom: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-right .line.horizontal  {bottom: 0; right: 0;}
    
    
    .certification-section-container .main-box > .cross-lines .line.vertical  {position: absolute; height: 100%; width: 1px; }
    .certification-section-container .main-box > .cross-lines.top .line.vertical  {background: linear-gradient(to top, transparent, #fff 20%, transparent);}
    .certification-section-container .main-box > .cross-lines.bottom .line.vertical  {background: linear-gradient(to bottom, transparent, #fff 20%, transparent); }
    .certification-section-container .main-box > .cross-lines.center .line.vertical  {top: 50%; left: 50%; transform: translate(-50%, -50%) }
    .certification-section-container .main-box > .cross-lines.top-left .line.vertical  {top: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.top-right .line.vertical  {top: 0; right: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-left .line.vertical  {bottom: 0; left: 0;}
    .certification-section-container .main-box > .cross-lines.bottom-right .line.vertical  {bottom: 0; right: 0;}

     /* inner boxes */
    .certification-section-container .main-box .inner-box{
      position: absolute;
      width:128px;
      height:128px;
      background-color:rgba(255, 255, 255, 5%);
    }
    .certification-section-container .main-box .inner-box.top-left{top: -128px;left: -128px;}
    .certification-section-container .main-box .inner-box.top-right{top: -128px;right: -128px;}
    .certification-section-container .main-box .inner-box.bottom-left{bottom: -128px;left: -128px;}
    .certification-section-container .main-box .inner-box.bottom-right{bottom: -128px;right: -128px;}
    .certification-section-container .main-box .inner-box.far-right{top: 0;right: -256px;}
    .certification-section-container .main-box .inner-box.far-left{top: 0;left: -256px;}

    /* inner corss lines & nodes */
    .certification-section-container .main-box .inner-box .cross-lines {
      position: absolute;
      width: 200px;
      height: 200px;
      transform-origin: center;
    }
    .certification-section-container .main-box .inner-box .line.horizontal {
      position: absolute;
      width: 200px;
      height: 1px;
      background: linear-gradient(to right, transparent, #fff 20%, transparent);
    }
    .certification-section-container .main-box .inner-box .line.vertical {
      position: absolute;
      height: 200px;
      width: 1px;
      background: linear-gradient(to bottom, transparent, #fff 20%, transparent);
    }
    .certification-section-container .main-box .inner-box .cross-lines .line {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .certification-section-container .main-box .inner-box .white-node {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
   
    }
    .certification-section-container .main-box .inner-box.top-left .cross-lines { top: -100px; left: -100px;}
    .certification-section-container .main-box .inner-box.top-right .cross-lines { top: -100px; right: -100px;}
    .certification-section-container .main-box .inner-box.bottom-right .cross-lines { bottom: -100px; right: -100px;}
    .certification-section-container .main-box .inner-box.bottom-left .cross-lines { bottom: -100px; left: -100px;}
    

    

    /* animations for the lines and boxes */
   /* ================== CONFIG ================== */
.certification-section-container .main-box { --t: 5s; } /* total cycle */

/* Optional stagger per inner box (randomized feel, still internally synced) */
.certification-section-container .main-box .inner-box            { --phase: 0s; }
.certification-section-container .main-box .inner-box.top-left    { --phase: .0s; }
.certification-section-container .main-box .inner-box.top-right   { --phase: .5s; }
.certification-section-container .main-box .inner-box.bottom-right{ --phase: 1.1s; }
.certification-section-container .main-box .inner-box.bottom-left { --phase: .8s; }
.certification-section-container .main-box .inner-box.far-left    { --phase: 1.6s; }
.certification-section-container .main-box .inner-box.far-right   { --phase: 1.3s; }

/* ================== BASES ================== */
/* OUTER cross-lines (no centering translate) */
.certification-section-container .main-box > .cross-lines .line.horizontal{
  transform-origin:center; 
  animation: drawHX-outer var(--t) ease-in-out infinite;
}
.certification-section-container .main-box > .cross-lines .line.vertical{
  transform-origin:center; 
  animation: drawVY-outer var(--t) ease-in-out infinite;
}
/* position helpers already set in your CSS (top/left/right/bottom classes) */

/* OUTER nodes (corner/center diamonds) */
.certification-section-container .main-box > .cross-lines .white-node{
  animation: nodePulse var(--t) ease-in-out infinite;
  
}

/* INNER boxes: background pulse */
.certification-section-container .main-box .inner-box{
  background-color: rgba(255,255,255,0);
  animation: boxFade var(--t) ease-in-out infinite;
  animation-delay: var(--phase,0s);
}

/* INNER cross-lines (centered with translate) */
.certification-section-container .main-box .inner-box .cross-lines { width:200px; height:200px; }
.certification-section-container .main-box .inner-box .cross-lines .line{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
}
.certification-section-container .main-box .inner-box .line.horizontal{
  width:200px; height:1px; transform-origin:center;
  animation: drawHX-inner var(--t) ease-in-out infinite; 
  animation-delay: var(--phase,0s);
}
.certification-section-container .main-box .inner-box .line.vertical{
  width:1px; height:200px; transform-origin:center;
  animation: drawVY-inner var(--t) ease-in-out infinite; 
  animation-delay: var(--phase,0s);
}

/* INNER nodes (centered diamonds) */
.certification-section-container .main-box .inner-box .white-node{
  position:absolute; top:50%; left:50%; width:6px; height:6px;
  transform: translate(-50%,-50%) rotate(45deg);
  animation: nodePulse var(--t) ease-in-out infinite;  
  animation-delay: var(--phase,0s);
}
/* start OUTER lines from their corner node */
.certification-section-container .main-box > .cross-lines.top-left  .line.horizontal { transform-origin: left  center; }
.certification-section-container .main-box > .cross-lines.top-left  .line.vertical   { transform-origin: center top; }

.certification-section-container .main-box > .cross-lines.top-right .line.horizontal { transform-origin: right center; }
.certification-section-container .main-box > .cross-lines.top-right .line.vertical   { transform-origin: center top; }

.certification-section-container .main-box > .cross-lines.bottom-right .line.horizontal { transform-origin: right  center; }
.certification-section-container .main-box > .cross-lines.bottom-right .line.vertical   { transform-origin: center bottom; }

.certification-section-container .main-box > .cross-lines.bottom-left .line.horizontal { transform-origin: left  center; }
.certification-section-container .main-box > .cross-lines.bottom-left .line.vertical   { transform-origin: center bottom; }

/* center stays from center (for completeness) */
.certification-section-container .main-box > .cross-lines.center .line.horizontal,
.certification-section-container .main-box > .cross-lines.center .line.vertical { transform-origin: center; }

/* ================== KEYFRAMES ================== */
/* draw lines – OUTER (no translate in transform list) */
@keyframes drawHX-outer{
  0%{ transform: scaleX(0); opacity:0 }
  10%{ opacity:1 }
  75%{ opacity:1 }
  100%{ transform: scaleX(1); opacity:0 }
}
@keyframes drawVY-outer{
  0%{ transform: scaleY(0); opacity:0 }
  10%{ opacity:1 }
  75%{ opacity:1 }
  100%{ transform: scaleY(1); opacity:0 }
}

/* draw lines – INNER (keeps translate for centering) */
@keyframes drawHX-inner{
  0%{ transform: translate(0,0) scaleX(0); opacity:0 }  /* translate handled by 'translate:' property above */
  10%{ opacity:1 }
  75%{ opacity:1 }
  100%{ transform: translate(0,0) scaleX(1); opacity:0 }
}
@keyframes drawVY-inner{
  0%{ transform: translate(0,0) scaleY(0); opacity:0 }
  10%{ opacity:1 }
  75%{ opacity:1 }
  100%{ transform: translate(0,0) scaleY(1); opacity:0 }
}

/* diamond pulse */
/* shared */
.certification-section-container .main-box .white-node{
  --s: 1;
  transform: var(--base, rotate(45deg)) scale(var(--s));
}

/* inner-box nodes need centering */
.certification-section-container .main-box .inner-box .white-node{
  --base: translate(-50%,-50%) rotate(45deg);
}

/* outer/direct nodes keep their existing absolute positions */
.certification-section-container .main-box > .cross-lines .white-node{
  --base: rotate(45deg);
}

/* animate only scale (works for both, no position shift) */
@keyframes nodePulse{
  0%{ --s:.65; opacity:0 }
  12%{ opacity:1 }
  28%{ --s:1.2 }
  42%{ --s:1 }
  100%{ --s:1; opacity:1 }
}

/* inner box background 0 → 15% → 0 */
@keyframes boxFade{
  0%  { background-color: rgba(255,255,255,0) }
  22% { background-color: rgba(255,255,255,0.05) }
  78% { background-color: rgba(255,255,255,0.05) }
  100%{ background-color: rgba(255,255,255,0) }
}

/* ================== ACCESSIBILITY ================== */
@media (prefers-reduced-motion: reduce){
  .certification-section-container .main-box .inner-box,
  .certification-section-container .main-box .inner-box .line,
  .certification-section-container .main-box .inner-box .white-node,
  .certification-section-container .main-box > .cross-lines .line,
  .certification-section-container .main-box > .cross-lines .white-node{
    animation: none !important; opacity:1;
  }
  .certification-section-container .main-box .inner-box{ background-color: rgba(255,255,255,0.15); }
}



/* responsive  */

    @media (max-width: 1100px){
        .certification-section-container .only-mobile{
            display: block !important;
        }
        .certification-section-container .only-desktop{
            display: none;
        }
    }
    @media (max-width: 768px){
      /*  .certification-section-container{*/
      /*      height:665px;*/
      /*  }*/
      /*html[lang="ar"] .certification-section-container{*/
      /*      height:640px;*/
          
      /*}*/
      /*.certification-section .text-container p,*/
      html[lang="ar"] .certification-section .text-container p{
        text-align: center;
      }
        .certification-section{
            padding-top:30px
        }
        .certificates-container{
            gap: 16px;
            top: unset;
            transform: translate(-50%);
            bottom: 50px
        }
        .certificate-container{
            flex-direction: column-reverse;
            height: fit-content;
            align-content: center;
            gap: 16px;

        }
        .certificate-container .text-container{
            gap: 10px;
        }
        .certificate-container .image-container{
            width: 100%;
        }
    }
   
/* certification section end */
/* faqs section start */

.faqs{
  background: linear-gradient(to bottom, #FAF8F8 50% , #FAF8F800) ;
  position: relative;
  z-index: 1;
}
.faqs .faq{
  background: #fff;
  padding: 18px 30px;
  max-width: 1064px
}
.faqs .title{
  width: fit-content;
  margin-bottom: 100px;
}
.faqs.flex-column{
  gap: 20px;
}
.faqs .title h4{
    color: var(--dark-text);
    font-weight: 400
}
.faqs .line{
  height: 5px;
  width: 100%;
  background-color: var(--accent);
}
.faqs h4{
  min-height: 45px ;
  font-weight: bold
}
.faqs h5{
  min-height: 45px ;
  color: var(--dark-text)
}
.faqs .intro-text{
  text-align: left;
}
.faq:hover{
  cursor: pointer;
}
.faqs .faq-content{
  max-height: 0;
  overflow: hidden;
  transition: all 0.8s ease;
}
.faqs .faq.closed .faq-content{
  max-height: 0;
}
.faqs .faq.opened .faq-content{
  max-height: 500px;
  padding: 20px 0;

}
.faqs .faq-content p{
  color: var(--dark-text);
} 
.service{
  height: fit-content;
  transition: all 0.4s ease;
}
.faqs .btn{
  margin: 100px 0;
}
.faqs .image-container img{
  border-radius: 50px;
}
.faqs .faq-button {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.faqs .faq-button:hover {
  cursor: pointer;
}
.faqs .faq-button .line{
  width: 18px;
  height: 2px;
  background: var(--dark-text);
  transition: all .4s ease;
}
.faqs .faq.opened .faq-button .line{
  background: var(--accent);
}

.faqs .faq .faq-button .line:nth-of-type(2){
    position: absolute;
    left: 50%;
    top: 50%;
}
.faqs .faq.closed .faq-button .line:nth-of-type(2){

  transform: translate(-50%,-50%) rotate(-90deg);
  
  
}
.faqs .faq.opened .faq-button .line:nth-of-type(2){
    transform: translate(-50%,-50%) rotate(0);

  background: var(--accent)
}
/* faqs section end */

@media (max-width: 768px) {

    /* faqs section start*/
    .faqs .btn{
        margin:50px 0;
    }
    .faqs .faq.opened .faq-content{
        padding: 10px 0;
    }
    .faqs .title{
      margin-bottom: 20px;
    }
}
/* faqs section end */

/* contact section start */
.contact-section-container {
  width: 100vw;
  position: relative;
  overflow-x: clip;
}
.contact-section-container.with-background{
  background: url('../assets/images/homepage/contact-background.webp');
  background-position: bottom;
  background-repeat: no-repeat ;
  background-size: cover;
}
.contact-section-container.with-background .container{
    padding-top: 50px;
}
.contact-us-background{
  position: absolute;
  width: 100vw;
  bottom: 0;
  right: 0;
  max-height:150vh;
}
.contact-section {
    background-color: transparent;
    position: relative;
    overflow: hidden;
    
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1064px;
    margin-inline: auto;
    padding-top: 0;
    padding-right:0;
}

html[lang="ar"] .contact-section {
    padding-right: min(5%, 50px);
    padding-left:0;
    
}
.contact-section__content {
    max-width: 600px;
    background: transparent;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.contact-section__header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-section__header h3 {
    margin-bottom: 8px;
    text-align: left;
}

.contact-section__header h2 {
    text-align: left;
    margin-bottom: 0;
}

.contact-section__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-section__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-section__form-group {
    display: flex;
    flex-direction: column;
}

.contact-section__form-group--full-width {
    grid-column: 1 / -1;
}

.contact-section__form-group input,
.contact-section__form-group textarea {
    padding: 15px 20px;
    border: 2px solid #e8e8e8;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    background-color: #fff;
}

.contact-section__form-group input:focus,
.contact-section__form-group textarea:focus {
    outline: none;
    border-color: #D6980D;
    box-shadow: 0 0 0 3px rgba(214, 152, 13, 0.1);
}

.contact-section__form-group input::placeholder,
.contact-section__form-group textarea::placeholder {
    color: #999;
    font-weight: 400;
}

.contact-section__form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.contact-section__submit-btn {
    width: 100%;
    padding: 10px 30px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Responsive Design for Contact Section */
@media (max-width: 1000px) {
  .contact-section {
    justify-content: center; 
    align-items: center; 
  }
}
@media (max-width: 768px) {
    
    .contact-us-background{
      height: 100vh;
      width:unset;
    }
    .contact-section__content {
        width: 100%;
    }
    
    .contact-section__form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
   
    
}

@media (max-width: 480px) {
  
    .contact-section__form-group input,
    .contact-section__form-group textarea {
        padding: 12px 15px;
        font-size: 15px;
    }
    
    .contact-section__submit-btn {
        padding: 15px 25px;
        font-size: 15px;
    }
}

/* contact section end */

/********************************** homepage end  **********************************/


/********************************** about page start  **********************************/
   .about-container{
        background: #FFFFFF;
        width: 100vw;
    }
    .about-page .about-container{
        background: #FFFFFF;
        width: 100%;
        margin-inline: auto;
    }
    .about-page .header{
      background-image:url('../assets/images/general/about-page-header.webp')
    }
    @media( max-width : 768px){
      .about-page .header-text-container p{
        line-height: 1.7;
      }
      .header {
        height: 400px !important;
      }
    }
    .about-card{
        display: flex;
        gap: 40px;
        padding: 2.5rem;
        background:#D9D9D9;
    }
    .about-page .about-section{
        background: #fff;
    }
    .about-card .image-container{
        /* max-width: 400px; */
        /* width: min( 100% , 400px); */
        width: 400px;
    }
    .about-card .text-container{
        max-width: 520px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly
    }
    .about-card .text-container p{
        line-height: 1.2
    }
    .about-container .title h4,  .about-container .title h2{
        color: white;
    }


    .about-page .header{
            width: 100%;
            height: 537px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .header-text-container{
          gap: 20px;
          display: flex;
          flex-direction: column;
          max-width: 834px;
          margin-inline: auto;
          text-align: center;
          padding-top: 50px;
          padding-inline: 30px;
        }
    .about-page .stats-section {
      background: #FFFFFF;
      color: #000;
      display: flex;
      justify-content: center;
    }
    .about-page .stats-content {
      width: 100%;
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .about-page .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      flex: 1 1 500px;
    }

    .stat-card {
      background: #FAF8F8;
      padding: 1.5rem;
      
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
      justify-content: space-between
    }
    
    .about-page .stats-grid .stat-card .stat-icon{
        max-width:60px;
        max-height:60px;
    }
    .about-page .stats-grid .stat-card .stat-icon svg{
        max-width:100%;
        max-height:100%;
    }
    .about-page .stats-section h5{
      color: var(--accent);
    }

    .stat-icon img {
      width: 32px;
      height: 32px;
    }

    .stat-text h3 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .stat-text h4 {
      margin: 0.5rem 0 0.25rem;
      font-size: 1rem;
      font-weight: 600;
    }

    .stat-text p {
      margin: 0;
      font-size: 0.9rem;
      color: #444;
    }

    .about-page .stats-image {
      flex: 1 1 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-page .stats-image img {
      width: 100%;
      max-width: 100%;
      height: auto;
      background: #ddd;
    }

@media( max-width:440px){  
  .about-page .stats-grid {
    grid-template-columns: 1fr;
  }
  .about-page .stats-section .xl3-text{
    font-size: 2.5rem;
  }
  .about-page .stats-section h5{
    font-size: 2rem;
  }
  .about-page .stats-section .xs-text{
    font-size: 1rem;
  }

}
/* sustainability section start */
 
        .sustainability-section-container {
            width: 100vw;
        }

        .sustainability-section {
            max-width: 1440px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 130px;
        }

        /* Left Side - Images */
        .sustainability-section .sustainability-images {
            position: relative;
            width: 630px;
            height: 630px;
            /* Remove background from parent - it's just a positioning container */
        }

        .sustainability-section .image-container {
            position: absolute;
            background-image: url('../assets/images/about/sustainability-background.webp'); /* Each mask has the image */
            background-size: 630px 630px; /* Same as parent container */
            background-repeat: no-repeat;
            overflow: hidden;
        }

        /* Image positioning with background-position offsets */
        .sustainability-section .image-1 {
            top: 0;
            left: 0;
            width: 110px;
            height: 110px;
            background-position: 0px 0px; /* Show top-left portion */
        }

        .sustainability-section .image-2 {
            top: 110px;
            left: 110px;
            width: 180px;
            height: 180px;
            background-position: -110px -110px; /* Offset to show correct portion */
        }

        .sustainability-section .image-3 {
            top: 0;
            left: 315px;
            width: 315px;
            height: 315px;
            background-position: -315px 0px; /* Show top-right portion */
        }

        .sustainability-section .image-4 {
            bottom: 0px;
            left: 0px;
            width: 315px;
            height: 315px;
            background-position: 0px -315px; /* Show bottom-left portion */
        }

        .sustainability-section .image-5 {
            top: 340px;
            left: 340px;
            width: 90px;
            height: 90px;
            background-position: -340px -340px; /* Show center portion */
        }

        .sustainability-section .image-6 {
            top: 453px;
            left: 453px;
            width: 177px;
            height: 177px;
            background-position: -453px -453px; /* Show bottom-right portion */
        }

        /* Right Side - Content */
        .sustainability-section .sustainability-content {
            max-width: 493px;
        }

        .sustainability-section .sustainability-content h2 {
            margin-bottom: 30px;
            line-height: 1.2;
        }


        /* Mobile Responsive */
        @media (max-width: 1300px) {
            .sustainability-section .sustainability-images{
                height: 504px;
                width: 504px;
            }
            .sustainability-section .image-container {
                background-image: url('../assets/images/about/sustainability-background.webp');
                background-size: 504px 504px; 
              
            }

            /* Image positioning with background-position offsets */
            .sustainability-section .image-1 {
                top: 0;
                left: 0;
                width: 88px;
                height: 88px;
                background-position: 0px 0px; /* Show top-left portion */
            }

            .sustainability-section .image-2 {
                top: 88px;
                left: 88px;
                width: 144px;
                height: 144px;
                background-position: -88px -88px; /* Offset to show correct portion */
            }

            .sustainability-section .image-3 {
                top: 0;
                left: 252px;
                width: 252px;
                height: 252px;
                background-position: -252px 0px; /* Show top-right portion */
            }

            .sustainability-section .image-4 {
                bottom: 0px;
                left: 0px;
                width: 252px;
                height: 252px;
                background-position: 0px -252px; /* Show bottom-left portion */
            }

            .sustainability-section .image-5 {
                top: 272px;
                left: 272px;
                width: 90px;
                height: 90px;
                background-position: -272px -272px; /* Show center portion */
            }

            .sustainability-section .image-6 {
                top: 362px;
                left: 362px;
                width: 177px;
                height: 177px;
                background-position: -362px -362px; /* Show bottom-right portion */
            }
        }
        @media (max-width: 1150px) {
            .sustainability-section .sustainability-images{
                height: 403.2px;
                width: 403.2px;
            }
            .sustainability-section .image-container {
                background-image: url('../assets/images/about/sustainability-background.webp');
                background-size: 403.2px 403.2px; 
              
            }

            /* Image positioning with background-position offsets */
            .sustainability-section .image-1 {
                top: 0;
                left: 0;
                width: 70.4px;
                height: 70.4px;
                background-position: 0px 0px; /* Show top-left portion */
            }

            .sustainability-section .image-2 {
                top: 70.4px;
                left: 70.4px;
                width: 115.2px;
                height: 115.2px;
                background-position: -70.4px -70.4px; /* Offset to show correct portion */
            }

            .sustainability-section .image-3 {
                top: 0;
                left: 252px;
                width: 252px;
                height: 252px;
                background-position: -252px 0px; /* Show top-right portion */
            }

            .sustainability-section .image-4 {
                bottom: 0px;
                left: 0px;
                width: 201.6px;
                height: 201.6px;
                background-position: 0px -201.6px; /* Show bottom-left portion */
            }

            .sustainability-section .image-5 {
                top: 217.6px;
                left: 217.6px;
                width: 72px;
                height: 72px;
                background-position: -217.6px -217.6px; /* Show center portion */
            }

            .sustainability-section .image-6 {
                top: 289.6px;
                left: 289.6px;
                width: 141.6px;
                height: 141.6px;
                background-position: -289.6px -289.6px; /* Show bottom-right portion */
            }
        }
        @media (max-width: 1150px) {
             .sustainability-section {
                flex-direction: column-reverse;
                gap: 28px;
                align-content: flex-start
            }
            .sustainability-section .sustainability-content{
                max-width: 403.6px
            }
        }
        @media (max-width: 768px) {
            .sustainability-section .sustainability-images {
                width: 300px;
                height: 300px;
                background-size: 300px 300px; /* Scale background for mobile */
            }

      
            /* Adjust image sizes and positions for mobile */
            .sustainability-section .image-1 {
                width: 60px;
                height: 60px;
                background-position: 0px 0px;
            }

            .sustainability-section .image-2 {
                top: 60px;
                left: 60px;
                width: 80px;
                height: 80px;
                background-position: -60px -60px;
            }

            .sustainability-section .image-3 {
                top: 0;
                left: 160px;
                width: 140px;
                height: 140px;
                background-position: -160px 0px;
            }

            .sustainability-section .image-4 {
                bottom: 0px;
                left: 0px;
                width: 140px;
                height: 140px;
                background-position: 0px -160px;
            }

            .sustainability-section .image-5 {
                top: 160px;
                left: 170px;
                width: 60px;
                height: 60px;
                background-position: -170px -160px;
            }

            .sustainability-section .image-6 {
                top: 220px;
                left: 230px;
                width: 70px;
                height: 70px;
                background-position: -230px -220px;
            }

            .sustainability-section .sustainability-content {
                text-align: center;
            }

            .sustainability-section .sustainability-content h2 {
                margin-bottom: 20px;
            }

        }

        @media (max-width: 480px) {
           

         
        }

/* sustainability section end */
/********************************** about us page end   **********************************/

/********************************** services page start   **********************************/
.services-page .header{
        width: 100%;
        height: 537px;
        background: url('../assets/images/general.header.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
 .services-page{
        background: #FAF8F8;
    }
    .services-page .header{
        background-image: url('../assets/images/general/services-header.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 66px;
    }
    .services-page .header h1{
         color: #fff;
    }
    .services-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2.5rem;
        justify-items: center;
    }

    /* services section start*/
    /* Sidebar Content Section Component */
    .sidebar-content-section {
        background-color: #f8f9fa;
    }

    .sidebar-content-section .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .sidebar-content-section__wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 60px;
    }

    .sidebar-content-section__sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .sidebar-content-section__item-title-content{
        display: flex;
        align-items: center;
        gap: 10px;
        
    }
    .sidebar-content-section__item-title-content .service-icon,
    .sidebar-content-section__item-title-content .service-icon svg{
        width: 40px;
    }
    .sidebar-content-section__item .service-icon svg path{
        fill: var(--dark-background);
        transition: all .3s ease;
    }
    .sidebar-content-section__item.active .service-icon svg path{
        fill: var(--accent);
    }
    .sidebar-content-section__item {
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .sidebar-content-section__item.active {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .sidebar-content-section__item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background-color: #D6980D;
    }
    html[lang="ar"]  .sidebar-content-section__item.active::before{
      left: unset;
      right: 0;
    }
    .sidebar-content-section__item-title {
        padding: 20px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }

    .sidebar-content-section__item:hover .sidebar-content-section__item-title {
        padding-left: 30px;
    }
    html[lang="ar"] .sidebar-content-section__item:hover .sidebar-content-section__item-title {
        padding-right: 30px;
        padding-left: 0;
    }

    .sidebar-content-section__item.active .sidebar-content-section__item-title {
        padding-left: 20px;
    }

    .sidebar-content-section__item-title h4 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .sidebar-content-section__item.active .sidebar-content-section__item-title h4 {
        color: #D6980D;
    }

    .sidebar-content-section__item-arrow {
        color: #999;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
    }
    html[lang="ar"] .sidebar-content-section__item-arrow{
      transform: rotate(180deg);
    }
    .sidebar-content-section__item:hover .sidebar-content-section__item-arrow {
        color: #D6980D;
        transform: translateX(5px);
    }
    html[lang="ar"] .sidebar-content-section__item:hover .sidebar-content-section__item-arrow {
        color: #D6980D;
        transform: translateX(20px) rotate(180deg);
    }

    .sidebar-content-section__item.active .sidebar-content-section__item-arrow {
        color: #D6980D;
        transform: translateX(5px) rotate(90deg);
    }

    .sidebar-content-section__content {
        background: white;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .sidebar-content-section__content-area {
        padding: 40px;
        background: white;
        background-image: url('../assets/images/general/services-details-background.webp');
        background-position: left;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .sidebar-content-section__content-area h2 {
        color: #D6980D;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 30px;
        line-height: 1.3;
        transition: all 0.5s ease;
    }

    .sidebar-content-section__content-text {
        color: #666;
        line-height: 1.7;
        font-size: 16px;
        transition: all 0.5s ease;
    }

    .sidebar-content-section__content-text p {
        margin-bottom: 20px;
    }

    .sidebar-content-section__content-text p:last-child {
        margin-bottom: 0;
    }

    /* Animation classes */
    .sidebar-content-section__content-updating {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    /* Mobile accordion content - hidden by default */
    .sidebar-content-section__mobile-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: white;
    }

    .sidebar-content-section__mobile-content-inner {
        padding: 0 25px 20px 25px;
        color: #666;
        line-height: 1.6;
        font-size: 15px;
    }

    @media (max-width: 1200px) {
        .sidebar-content-section__wrapper{
            gap: 20px;
        }
        .sidebar-content-section__item .sidebar-content-section__item-title h4{
            font-size: 14px;
        }
        html[lang='ar'] .sidebar-content-section__item .sidebar-content-section__item-title h4 {
            font-size: 16px;
        }
        .sidebar-content-section__item-title{
            padding-inline: 15px;
        }
        .sidebar-content-section__item.active .sidebar-content-section__item-title{
            padding-inline: 20px;
        }
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .sidebar-content-section__item.active::before{
             max-height: 93px;
        }
       
        .sidebar-content-section__wrapper {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .sidebar-content-section__sidebar {
            gap: 10px; /* 10px gap between accordion items */
        }

        /* Hide desktop content on mobile */
        .sidebar-content-section__content {
            display: none;
        }

        /* Mobile accordion styles */
        .sidebar-content-section__item {
            margin-bottom: 0;
            border-radius: 0;
        }

        .sidebar-content-section__item.active {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* Show mobile content on active */
        .sidebar-content-section__item.active .sidebar-content-section__mobile-content {
            max-height: 500px; /* Large enough to accommodate content */
        }

        /* Reset hover effects on mobile */
        .sidebar-content-section__item:hover .sidebar-content-section__item-title {
            padding-left: 20px;
        }

        .sidebar-content-section__item.active .sidebar-content-section__item-title {
            padding-left: 25px;
        }
        
        .sidebar-content-section__item-title {
            padding: 15px 20px;
        }
        
        .sidebar-content-section__item-title h4 {
            font-size: 14px;
        }

        /* Rotate arrow on mobile when active */
        .sidebar-content-section__item.active .sidebar-content-section__item-arrow {
            transform: translateX(0) rotate(90deg);
        }

        .sidebar-content-section__item:hover .sidebar-content-section__item-arrow {
            transform: translateX(0);
        }
    }

/********************************** services page end   **********************************/
/********************************** projects page start   **********************************/
.projects{
  background: #FAF8F8;
}
.projects .header{
  width: 100%;
  height: 537px;
  background: url('../assets/images/general/projects-header.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* projects cards start */

    .project-cards-section-container{
        width:100vw;
        background: #FAF8F8;
    }
    .project-cards-section{
        max-width: 1440px;
        width: 100%;
        height: fit-content;
        background: #FAF8F8;
        
        /*display: flex;*/
        /*justify-content: start;*/
        /*align-items: center;*/
        /*flex-wrap: wrap;*/
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;

    }
    .project-card{
        position: relative;
        background: #fff;
        width: 409px;
        height: 544px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .project-card .image-container{
        width: 369px;
        height: 296px;
        margin-bottom: 20px;
    }
    .project-card .title{
        margin-bottom: 20px;
        font-weight: bold;
    }
    .project-card .project-title{
        margin-bottom: 20px;
        font-size:1.5rem;
        font-weight: bold;
        height: 80px;
    }
    .project-card .project-detail{
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
        align-items:flex-start;
        
    }
    .project-card .project-detail p.l-text{
        margin-top: -3px;
    }
    .project-card .project-detail p b{
        color: #D6980D;
    }
    .project-card svg{
        width: 25px;
        height: 25px;
        text-align:end; 
        position: absolute;
        bottom: 25px;
        right: 25px;
        transition: all .4s ease;
    }
    
    html[lang="ar"] .project-card svg{
        right: unset;
        left: 20px;
        transform: rotate(180deg);
    }
    .project-card svg:hover{
        stroke: #D6980D;
        transform: scale(1.3);
        cursor: pointer;
    }
    .project-card svg:hover path{
            stroke: #D6980D;
    }

  

    @media(max-width:1250px){
      .project-cards-section{
        grid-template-columns: 1fr 1fr;
                justify-items: center;
      }
    }
    @media(max-width:768px){
      .project-card .project-title{
        height: fit-content;
      }
      .project-card{
        width: 100%;
        height: fit-content;
      }
       .project-card .image-container{
        width: 100%;
      }
      .project-card .image-container{
        height: unset;
      }
    }
    @media(max-width:420px){
      .project-card{
            width: 100%;
      }
      .project-card .image-container{
        width: 100%;
      }
    }
/* projects cards end */
/********************************** projects page end   **********************************/

/********************************** project details page start   **********************************/
.project-details-page{
  background: #FAF8F8;
}
.project-details-page .header{
    width: 100%;
    height: 537px;
    background: url('../assets/images/general/contact-header.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

  /* project header start  */
  /* project header end  */
  /* projects details section start*/
  .project-details-section-container{
    width: 100vw;
  }
  .project-details-section{
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  .project-details-section .project-title{
    text-align: center;
    color: var(--dark-text);
  }
  .project-details-section .project-details-container{
    background: #fff;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .project-details-section .project-details-container .details{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .project-details-section .project-details-container .project-detail{
    display: flex;
    align-items:flex-start;
    gap: 10px;
    
  }
  .project-details-section .project-details-container b{
    color: var(--accent);
  }
  .project-details-section .project-details-container p.m-text{
          padding-top:3px;
  }
  .project-details-section .project-details-container .project-description{
    width: 475px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  @media(max-width:678px){
      .project-details-container{
          flex-direction:column;
          gap:10px;
      }
      .project-details-section .project-details-container .details{
          width:100%;
      }
      .project-details-section .project-details-container .project-description{
          width:100%;
          flex-direction:row;
      }
      .project-details-section .project-details-container .project-description p.m-text{
          padding-top:5px;
        
      }
  }
  /* projects details section end*/
  /* project images slider start */
      .images-slider-background{
         background: linear-gradient(to right, rgba(250,248,248,1) 0%, rgba(250,248,248,0) 25%, rgba(250,248,248,0) 75%, rgba(250,248,248,1) 100%);
         position:absolute;
         width:100%;
         height:100%;
        left:50%;
        transform:translateX(-50%);
        z-index:19;
        pointer-events: none; 
      }
    .slider-container {
            direction: ltr;
            position: relative;
            max-width: 1400px;
            height: 570px;
            margin: 0 auto;
            overflow: hidden;
            padding: 0 80px; /* Space for navigation arrows */
            touch-action: pan-y; 
        }

        .project-images-slider .slider-track {
            display: flex;
            align-items: center;
            gap: 20px;
            transition: transform 0.5s ease;
            padding: 40px 0;
             touch-action: pan-y; 
        }

        .project-images-slider .card {
            flex-shrink: 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            background: white;
            cursor: pointer;
            transition: all 0.5s ease;
            opacity: 0.7;
            transform: scale(0.85);
            /* Default (inactive) size */
            width: 280px;
            height: 210px;
        }

        .project-images-slider .card.active {
            /* Active (centered) size - your specifications */
            width: 414px;
            height: 310px;
            opacity: 1;
            transform: scale(1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        .project-images-slider .card img {
            width: 100%;
            object-fit: cover;
        }

        .project-images-slider .card-content {
            padding: 15px;
        }

        .project-images-slider .card.active .card-content {
            padding: 20px;
        }

        .project-images-slider .card-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }

        .project-images-slider .card.active .card-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .project-images-slider .card-description {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }
        
        .project-images-slider .card.active .card-description {
            font-size: 14px;
            line-height: 1.5;
        }

        /* Navigation arrows */
        .project-images-slider .nav-arrow {
            position: absolute;
            top:25%;
            color: white;
            cursor: pointer;
            font-size: 24px;
            z-index: 100;
            transition: all 0.3s ease;
            pointer-events: auto;
            cursor: pointer;
        }

        .project-images-slider .nav-arrow rect {
             transition: all 0.3s ease;
        }
        .project-images-slider .nav-arrow:hover rect {
           fill:#D6980D;
           
        }

        .project-images-slider .nav-arrow.prev {
            left: 20px;
        }

        .project-images-slider .nav-arrow.next {
            right: 20px;
        }

        .project-images-slider .nav-arrow:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Pagination dots */
        .project-images-slider .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

        .project-images-slider .pagination-dot {
            width: 16px;
            height: 7px;
            background: rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .project-images-slider .pagination-dot.active {
            background: #333;
            transform: scale(1.2);
            width:46px;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .project-images-slider .card {
                width: 250px;
            }
            
            .project-images-slider .card.active {
                width: 414px;
            }
        }

        @media (max-width: 768px) {
          .slider-container {
            height: 400px;  
          }

            .project-images-slider .slider-container {
                padding: 0 60px;
            }
            
            .project-images-slider .card {
                width: 278px;
                  height:150px;
            }
            
            .project-images-slider .card.active {
                width: 320px;
                height:200px;
            }
         .project-images-slider .nav-arrow{
             display:none;
         }
        }

        @media (max-width: 480px) {
            .project-images-slider .slider-container {
                padding: 0 50px;
            }
            
            .project-images-slider .card {
                width: 160px;
                height:120px;
            }
            
            .project-images-slider .card.active {
                width: 280px;
            }
            
        
        }
  /* project images slider end */
/********************************** project details page end   **********************************/
/********************************** contact us page start   **********************************/
.contact-page .header{
    width: 100%;
    height: 537px;
    background: url('../assets/images/general/contact-header.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

     .contact-page{
        background: #FAF8F8;
        
    }
    .contact-page .header{
        background-image: url('../assets/images/general/contact-page-header.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 66px;
    }
    .contact-page .header h1{
         color: #fff;
    }
    .contact-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2.5rem;
        justify-items: center;
    }


/* contact info section + map */
        .contact-info-section {
        }

        .contact-page .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background-color: #fff;
            padding: 20px;
            width: 447px;
            height: fit-content;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background-color: #2c2c2c;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-icon svg {
            width: 24px;
            height: 24px;
            fill: #ffffff;
        }

        .contact-content {
            flex: 1;
        }
        .contact-content .contact-phone-number{
            direction:ltr;
        }

        .contact-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c2c2c;
            margin-bottom: 8px;
        }

        .contact-info {
            color: #666666;
            line-height: 1.6;
        }


        .map-container {
            position: relative;
            width: 100%;
            height: 450px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            filter: grayscale(100%) contrast(1.2) brightness(0.9);
            transition: filter 0.3s ease;
        }

        .map-container:hover iframe {
            filter: grayscale(100%) contrast(1.1) brightness(1);
        }

        @media (max-width: 1000px) {
          .contact-page .container{
            grid-template-columns: 1fr;
          }
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .contact-details {
                gap: 30px;
            }

            .contact-item {
                gap: 15px;
                width: 100%;
                height: auto;
                min-height: 99px;
            }

            .contact-icon {
                width: 45px;
                height: 45px;
            }

            .contact-icon svg {
                width: 20px;
                height: 20px;
            }

            .l-text {
                font-size: 16px;
            }

            .map-container {
                height: 300px;
            }
        }

        @media (max-width: 480px) {
            .contact-info-section {
                padding: 40px 0;
            }

            .container {
                padding: 0 15px;
            }

            .contact-item {
                width: 100%;
                height: auto;
                min-height: 80px;
                padding: 15px;
            }

            .map-container {
                height: 250px;
            }
        }
/********************************** contact us page end   **********************************/


/* footer start */

  footer{
   
    width: 100vw;
    background-color: #1f1f1f;

  }
  .footer-container {
      color: white;
      padding: 40px 20px 20px;
      max-width: 1440px;
      padding-inline: 100px;
      margin: 0 auto;
  }

  .footer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
  }

  footer .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      height:fit-content;
  }
footer  .logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(45deg, #f39c12, #e67e22);
      border-radius: 8px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }

footer  .logo-icon::before {
      content: '';
      width: 20px;
      height: 20px;
      background: white;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }



footer  .footer-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
  }
footer .footer-section h6 {
  margin-bottom: 7px;
}
footer .footer-section a {
  margin-bottom: 2px;
}

footer .footer-section h3 {
      /* margin-bottom: 20px; */
      margin-bottom: 10px;
      font-size: 18px;
      color: #fff;
}
footer .footer-section .social-mdeia-icons {
      display: flex;
      gap: 6px;
}

footer .footer-section p,
  .footer-section a {
      color: #ccc;
      text-decoration: none;
      line-height: 1.6;
      margin-bottom: 10px;
      display: block;
  }

footer  .footer-section a:hover {
      color: #f39c12;
  }

footer  .email-input {
      width: 100%;
      padding: 12px;
      background-color: #f39c12;
      border: none;
      border-radius: 4px;
      color: white;
      font-size: 14px;
  }

footer  .email-input::placeholder {
      color: rgba(255, 255, 255, 0.8);
  }
footer .logo{
    width:140px;
}

footer .logo img{
    width:100%;
}
footer .footer-content .footer-phone-number{
    display:flex;
    gap:4px;
}
footer .footer-content .footer-phone-number p{
    font-size:inherit;
    font-weight:inherit;
    font-family:inherit;
}
footer .footer-content .footer-phone-number p.pn{
    direction:ltr;
    
}
footer .footer-content .footer-section:first-child{
    font-size:12px;
}
footer  .footer-bottom {
      margin-top: 0;
      padding-top: 20px;
      /*border-top: 1px solid #444;*/
      text-align: left;
      color: var(--accent);
      font-size: 12px;
  }
  footer .footer-container.mobile .footer-bottom {
 
      text-align: center;
       margin-top: 0;
  }

  /* Tablet styles */
  @media (min-width: 768px) {
   
    footer  .footer-content {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
      }
    footer .footer-section h6{
        font-size:12px;    
        
    }
     footer .footer-section a{
         font-size:11px;
     }
  }

  /* Desktop styles */
  @media (min-width: 1024px) {
    footer  .footer-content {
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
          gap: 40px;
      }

    footer  .footer-section:last-child {
          grid-column: auto;
      }
      footer .footer-container.desktop{
        display: grid;
      }
      footer .footer-container.mobile{
        display: none;
      }
  }

  /* Mobile adjustments */
  @media (max-width: 1024px) {
    footer .footer-container.desktop{
      display: none;
    }
    footer .footer-container.mobile{
      display: flex;
      flex-direction: column;
      width: 100%;
          gap: 0;
          align-items: flex-start;
    }
    footer .footer-container.mobile .footer-content{
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      margin-bottom:40px;
    }
    
    
    footer .footer-container.mobile  .footer-header {
          flex-direction: column;
          gap: 20px;
          text-align: left;
          align-items: flex-start;
          max-width: 300px;
          margin-bottom:0;
      }
    footer  .footer-container.mobile .footer-bottom{
        width:100%;
    }
  .footer-container{
      padding-inline: 16px;
    }
  }
  @media (max-width: 480px) {
    footer .footer-container.mobile{
      align-items: center;
    }
        footer .footer-container.mobile  .footer-header {
          text-align: center;
          align-items: center;
      }
  }

/* footer end */




/* fonts responsive */
@media (max-width: 1100px) {
  html{
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  html{
    font-size: 12px;
  }
  html[lang='ar']{
    font-size: 14px;
  }
}



/* ar styling */

/* Basic RTL Styles */
[dir="rtl"] {
    text-align: right;
}

/* Text Direction */
[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] h1{
  text-align: right;
}
/* [dir="rtl"] .hero-swiper .swiper-slide {
  align-items: flex-start;
} */

[dir="rtl"] .hero-swiper .slide1::before,
[dir="rtl"] .hero-swiper .slide2::before,
[dir="rtl"] .hero-swiper .slide3::before,
  [dir="rtl"] .hero-section .lines-background,
  [dir="rtl"]  .hero-section .boxes-background{
    transform: scaleX(-1);
    right: unset;
    left: 0;
  }

  [dir="rtl"]  .vertical-cards-section .vertical-card-icon{

  }
   [dir="rtl"]  .vertical-cards-section .vertical-card .vertical-card-title,
   [dir="rtl"] .vertical-cards-section .vertical-card-subtitle{
    text-align: right;
   }

  [dir="rtl"] .projects-section{
    direction: ltr;
  }
  [dir="rtl"] .services-section .service-card .text-container {
    text-align: right;
  }
  [dir="rtl"] .vertical-cards-section .vertical-card:not(.active) .vertical-card-content{
    bottom: 0;
  }
  [dir="rtl"]  .vertical-cards-section .vertical-card:not(.active) .vertical-card-title{
    padding-left:0;

  }
  html[lang='ar'] .vertical-cards-section .vertical-card-title{
    width: fit-content;
  }
  [dir="rtl"] .contact-section__header h3,
  [dir="rtl"] .contact-section__header h2,
  [dir="rtl"] .contact-section__form-group input,
  [dir="rtl"] .contact-section__form-group textarea{
    text-align: right;
  }


  
  @font-face {
    font-family: 'ITC-Handle';
    src: url('../fonts/ITC-Handel/ITC-Handle.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }

  [dir="rtl"] *{
    font-family: 'ITC-Handle';
  }
  [dir="rtl"] .language-switcher a{
    font-family: "Montserrat";
  }