@font-face {
  font-family: 'Source Han Sans CN Light';
  src: url('fonts/Source-Han-Sans-CN-Light.otf') format('woff2');
  font-display: swap;
}



@font-face {
  font-family: 'Times-New-Roman';
  src: url('fonts/times-new-roman.ttf') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Times-New-Roman';
  src: url('fonts/OpenSans-Regular.ttf') format('woff2');
  font-display: swap;
}

/* Apply Arabic font when content is in Arabic */
:lang(ar) {
  font-family: 'Times-New-Roman', serif;
}

/* Apply English font when content is in English */

/* Apply Chinese font when content is in English */
:lang(zh) {
  font-family: 'Source Han Sans CN Light', 'Montserrat', sans-serif;
}


/* Styling the scrollbar track */
::-webkit-scrollbar {
  width: 8px; /* Adjust the width of the scrollbar */
  height: 8px; /* Adjust the height of the horizontal scrollbar */
}

/* Styling the scrollbar track (the background of the scrollbar) */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Light gray background */
  border-radius: 10px;
}

/* Styling the scrollbar thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
  background-color: #000000; /* Dark gray thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

  /* Hover effect on the scrollbar thumb */
  ::-webkit-scrollbar-thumb:hover {
      background-color: #555; /* Darker gray when hovering */
      border-radius: 10px;
  }

/* Styling the scrollbar button (the arrows at the top/bottom of the scrollbar) */

body {
  line-height: normal !important;
}

.progress-bar {
  height: 40px; /* Inactive progress bar height */
  overflow: hidden;
  position: relative;
  transition: height 0.2s ease;
}

.progress-bar-fill {
  width: 100%;
  height: 0;
  transition: height 0.6s ease;
}

.progress-bar.active {
  height: 100px; /* Increased height for active slide */
}

  .progress-bar.active .progress-bar-fill {
      height: 100%; /* Fill the active progress bar */
  }
/*end of slider css*/

/*start search bar css*/
/* Initial styles for the search overlay */
#search-overlay {
  transform: translateY(-100%); /* Start above the screen */
  transition: transform 0.5s ease-in-out; /* Animation effect */
  display: none; /* Prevent interaction when hidden */
}

  /* When the overlay is active, bring it into view */
  #search-overlay.active {
      transform: translateY(0); /* Move to the center of the screen */
      display: flex; /* Ensure the overlay is displayed */
  }

  /* When the overlay is hidden, move it off the screen */
  #search-overlay.hidden {
      display: none; /* Prevent interaction */
      pointer-events: none; /* Disable interactions */
  }


/*start mobile nav css*/
.mobile-menu {
  left: -200%;
  transition: 0.5s;
}

  .mobile-menu.active {
      left: 0;
  }

  .mobile-menu ul li ul {
      display: none;
  }

  .mobile-menu ul li:hover ul {
      display: block;
  }
/* Common transition for both desktop and mobile arrows */
#desktop-dropdown-arrow,
#mobile-dropdown-arrow {
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* When arrow is up (rotated 180deg) */
.fa-chevron-up {
  transform: rotate(180deg);
}

/* When arrow is down (default state) */
.fa-chevron-down {
  transform: rotate(0deg);
}
/* Add this to your custom CSS */
/* Add this to your custom CSS */
/* Rotate only the SVG arrow */
.group:hover #dropdown-arrow {
  transform: rotate(180deg); /* Rotate the arrow by 180 degrees */
  transition: transform 0.3s ease-in-out; /* Smooth transition */
}
/* Mobile menu hidden by default on larger screens */
#mobile-menu {
  display: none; /* Initially hidden */
}

/* Show mobile menu on smaller screens */
@media (max-width: 1023px) {
  #mobile-menu {
      display: block; /* Only visible when toggled */
  }
}

.description {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 70px;
  padding-bottom: 70px;
}
/* Ensure the slider section has relative positioning (if it's not already) */
.slider-section {
  position: relative;
}

/* Add overlap to the new section */
.new-section {
  position: absolute;
  top: -20%; /* This will make the new section overlap 20% of the slider */
  left: 0;
  width: 100%;
  z-index: 1; /* Ensure it's above the slider section */
}

.opinion {
  padding-bottom: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/./././theme/saudiemaar/img/section1-bg.2.png);
  background-position: center;
  background-origin: initial;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -10rem;
}

.dis {
  margin-top: 5rem; /* Apply margin-top to .dis */
}

.relative-section {
  position: relative;
  top: 7rem; /* Adjust the position to counter the margin-top of .dis */
}

@media (max-width: 1022px) {
  .opinion {
      padding-top: 60px;
      padding-bottom: 60px;
      margin-top: -14rem !important;
  }
}

@media (max-width: 1024px) {
  .opinion {
      padding-top: 60px;
      padding-bottom: 60px;
      margin-top: -11rem;
  }
}
/* Adjust padding for smaller screens */
@media (max-width: 768px) {
  .opinion {
      padding-top: 60px;
      padding-bottom: 60px;
      margin-top: -14rem !important;
      background-size: auto;
  }

  .swiper-margin {
      margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .swiper-margin {
      margin-bottom: -3rem;
  }

  .opinion {
      padding-top: 40px;
      padding-bottom: 40px;
      margin-top: -18rem !important;
  }

  .relative-section {
      top: 14rem;
  }
}

/* New media query for larger screens */
@media (min-width: 1687px) {
  .opinion {
      background-position: center top; /* Ensure the image is positioned correctly */
      background-origin: initial;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: -10rem;
      padding-bottom: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .overlay-bg {
      padding-bottom: 15rem !important;
  }
}

@media screen and (min-device-width: 520px) and (max-device-width: 767px) {
  .overlay-bg {
      padding-bottom: 5rem !important;
  }
}
/* CSS for the Bottom Overlay Background Image */
.overlay-bg {
  background-image: url('/./././theme/saudiemaar/img/section1-bg.5.png');
  background-size: cover; /* Maintains aspect ratio */
  background-position: left top; /* Starts the image from the top-left corner */

  margin: 0;
  padding-bottom: 11rem;
}

@media screen and (min-device-width: 1024px) and (max-device-width: 1254px) {
  .overlay-bg {
      padding-bottom: 9rem !important;
  }
}

@media (max-width: 536px) {
  .overlay-bg {
      padding-bottom: 2rem !important;
  }
}

html, body {
  width: 100%;
  overflow-x: hidden; /* Prevents horizontal scrolling */
}
/* Add a custom CSS rule */
.nav-mt {
  transition: margin-top 0.3s ease; /* Smooth transition */
}

/*sweeping scroll css*/
@media (max-width: 536px) {
  .slider-container {
      display: flex;
      transition: transform 0.5s ease-in-out;
  }

  #scroll-container {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      padding-left: 0; /* Removed left padding */
      padding-right: 10%; /* Retain padding for visibility of next item */
      gap: 8%; /* Adjust gap for spacing */
  }

  .scroll-item {
      flex: 0 0 auto;
      scroll-snap-align: start; /* Align items to the left */
      /**padding: 8px;/ 
  border-radius: 50%;
  margin-left: 0; /* Remove negative margins */
      margin-right: 0; /* Remove negative margins */
      width: 90%; /* Keep the width consistent */
  }

      .scroll-item:first-child {
          margin-left: 0; /* Ensure the first item is aligned correctly */
      }

      .scroll-item:last-child {
          margin-right: 0; /* Remove extra margin for the last item */
      }
}


/*sticky header css*/
/* Sticky Header Style */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Background turns white when sticky */
  z-index: 1000; /* Ensures the header stays on top of other content */
}

  /* Optional: Add some padding or style when header is sticky */
  .sticky .containerslider {
      padding-top: 5px; /* Adjust padding as needed */
      padding-bottom: 5px;
  }

/* Optional: Transition to make the background color change smoothly with delay */
header {
  transition: background-color 0.2s ease 0.2s; /* 0.5s delay before transition starts */
}

/* Custom Tailwind Configuration for Animation */
.group-primary:hover .group-hover\:border-tertiary {
  border-color: #045034;
}

.group-primary:hover .group-hover\:text-tertiary {
  color: #045034;
}

.group-primary::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #045034;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.group-primary:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.group-primary:hover svg path {
  fill: #045034;
}
/*animation group white*/
.group-white:hover .group-hover\:border-tertiary {
  border-color: #ffffff;
}

.group-white:hover .group-hover\:text-tertiary {
  color: #ffffff;
}

.group-white::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.group-white:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.group-white:hover svg path {
  fill: #ffffff;
}

/*group secondary*/
.group-secondary:hover .group-hover\:border-tertiary {
  border-color: #CC8A00;
}

.group-secondary:hover .group-hover\:text-tertiary {
  color: #CC8A00;
}

.group-secondary::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #CC8A00;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.group-secondary:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.group-secondary:hover svg path {
  fill: #CC8A00;
}
/*sticky logo*/
/* Default Header */


#header-sticky {

  top: 0;
  width: 100%;
  background-color: transparent;
  height: 80px;
  box-shadow: none;
  transition: background 0.3s;
  z-index: 1000;
}

@media screen and (max-width: 767px) {
  #header-sticky {
      z-index: 50 !important;
  }
}
/* Sticky Header (No Delay) */
#header-sticky.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px; /* Adjust height when sticky */
  background-color: rgba(0, 0, 0, 0.9); /* Slight transparency */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 
}

@media (max-width : 768px) {
  #header-sticky.sticky {
      top: -5px;
      height: auto; /* Adjust height when sticky */
      z-index: 99999999 !important;
  }
}

/* Optionally, add a transition for the logo and other elements */
#header-sticky.sticky .logo svg {
  width: 80px; /* Reduced width */
  height: 50px; /* Reduced height */
}

/* Ensure the transform property is used for smooth hover transitions */
.content-box {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0); /* Set initial state */
}

/*start new nav css*/
/* Normal CSS version */

.menu-container ul {
  display: none; /* Hidden by default */
}

@media (min-width: 768px) {
  .menu-container ul {
      display: flex; /* Display flex on medium screens (md) and above */
      gap: 1.5rem; /* Apply space-x-6 equivalent in Tailwind */
  }
}

.menu-container ul li {
  display: flex;
  position: relative;
}

  .menu-container ul li a {
      white-space: nowrap; /* Prevent text wrapping */
      margin-right: 0.25rem; /* Equivalent to mr-1 in Tailwind */
      color: white;
      font-size: 1rem; /* Equivalent to text-base */
      display: flex;
      align-items: center;
      transition: all 0.3s ease; /* Transition duration */
  }

  .menu-container ul li ul {
      display: none; /* Hidden by default */
  }

@media (min-width: 768px) {
  .menu-container ul li ul {
      display: block; /* Display block on medium screens (md) and above */
      gap: 0; /* Equivalent to space-x-0 in Tailwind */
  }
}

@media (min-width: 1280px) {
  .menu-container {
      display: flex;
  }
}
/* Menu container styles */
/*.menu-container {
display: none;
 For responsive design 
}*/

@media (min-width: 768px) {
  .menu-container {
      display: flex; /* For md breakpoint */
      justify-content: space-x-6;
  }
}

@media (min-width: 1024px) {
  .menu-container {
      display: flex; /* For lg breakpoint */
  }
}

@media (min-width: 1280px) {
  .menu-container {
      display: flex; /* For xl breakpoint */
  }
}

/* Menu list items */
.menu-container li {
  display: flex;
  position: relative;
}

  /* Menu item links */
  .menu-container li a {
      white-space: nowrap;
      margin-right: 0.25rem; /* mr-1 equivalent */
      color: white;
      font-size: 1rem; /* text-base equivalent */
      display: flex;
      align-items: center;
      transition: all 0.3s ease-in-out; /* transition-all duration-300 eases */
      padding: 0;
      text-decoration: none;
  }
/* .menu-container li a:hover {
    color: #CC8A00;
    text-decoration: underline;
    text-decoration-color: #CC8A00;
    text-underline-offset: 6px;
}*/ this is for cms not use in local
/* Submenu list inside menu items */
.menu-container li ul {
  display: none; /* hidden for default */
}

/* For medium and larger screens, show the submenu */
@media (min-width: 768px) {
  .menu-container li ul {
      display: block;
  }
}
/* Default icon (LTR) */
.icon-arrow {
  transition: transform 0.3s ease;
}

/* When the document is in RTL (e.g., Arabic), rotate the icon */
[dir="rtl"] .icon-arrow {
  transform: rotate(180deg); /* Reverse the arrow direction */
}
/*accordian css*/
.accordion-content {
  transition: max-height 0.2s ease-out;
  overflow: hidden; /* Hide the content when collapsing */
  max-height: 0; /* Initially collapsed */
}
/*section 4 css*/
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
}

.swiper-container {
  /*margin-left: -15px;*/ /* Adjust this value as needed */
  overflow: hidden;
  position: relative;
}

.custom-svg {
  width: 38px;
  height: 38px;
}

@media (max-width: 640px) {
  .custom-svg {
      width: 24px; /* Adjust for mobile width */
      height: 24px; /* Adjust for mobile height */
  }
}

/*start div expend css*/
#grid {
  cursor: pointer;
  transition: 500ms;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

:where(.left, .center, .right) {
  background: navajowhite;
  transition: 300ms;
}

  :where(.left, .center, .right):hover {
      background: crimson;
  }

#grid:has(.left:hover) {
  grid-template-columns: 2fr 0fr;
}

#grid:has(.center:hover) {
  grid-template-columns: 0fr 2fr;
}

#grid:has(.right:hover) {
  grid-template-columns: 0.5fr 0.5fr 2fr;
}

/*start video popup animation css*/
.modalContainer {
  transition: all 0.5s ease-in-out;
}

  .modalContainer.animate-drop-in {
      transform: scale(1);
      opacity: 1;
      background: rgba(0, 0, 0, 0.8);
  }

  .modalContainer.animate-fade-out {
      transform: scale(0.01);
      opacity: 0;
  }

.swiperGalleryPrev:disabled svg path,
.swiperGalleryNext:disabled svg path {
  stroke: #9ca3af; /* Change the stroke color to grey */
}


/* Hover cross animation */
.centered-path {
  fill: none;
  stroke: black;
  stroke-width: 2;
  transform: translate(250, 250); /* Translate the path to center at (250,250) */
}

.path-element {
  stroke: black;
  stroke-width: 3;
  transform: translateX(50); /* Left side ke space ke liye translate kar rahe hain */
}


/*start about us logo css*/
.logo-container {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-logos {
  display: flex;
  transition: transform 0.5s ease;
}

  .logo-logos img {
      height: auto;
      width: auto;
      margin-right: 12px;
      margin: 0rem;
      padding: 0rem 3rem;
      flex-shrink: 0;
      transition: all 0.3s ease;
  }

      /* Remove margin-right for the last logo */
      .logo-logos img:last-child {
          margin-right: 0;
      }

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .logo-logos img {
      height: auto;
      width: auto;
      padding: 0rem 1rem;
  }

  .logo-container {
      max-width: 100%; /* Allow full width on mobile */
  }
}

.logoPrev:disabled svg path,
.logoNext:disabled svg path {
  stroke: #9ca3af; /* Change the stroke color to grey */
}
/*start about us svg css*/
/* Default height for larger screens */
.about-svg {
  width: 62px;
  height: 62px;
}

/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  .about-svg {
      width: 36px; /* Adjust width */
      height: 36px; /* Adjust height for mobile */
  }
}

/*start about us svg animation*/
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatey(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatey(-50px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide2 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatey(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatey(-450px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide4 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatey(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatey(-750px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide5 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translateY(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translateY(-150px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide6 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatey(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatey(-250px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide7 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatey(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatey(-650px); /* Move element up */
  }
}

/* Keyframes for SVG path */
@keyframes drawPath {
  to {
      stroke-dashoffset: 0;
  }
}

/* Keyframes for SVG circle */
@keyframes drawCircle {
  to {
      r: 84.4082;
  }
}

#animatedPath {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

#animatedCircle {
  transform: scale(0.8);
  opacity: 0.6;
  transform: translateY(-50px);
}

@keyframes scaleOpacitySlide {
  from {
      transform: scale(0.8);
      opacity: 0.6;
      transform: translateY(-50px);
  }

  to {
      transform: scale(1);
      opacity: 1;
      transform: translateY(0);
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide8 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(650px); /* Move element up */
  }
}

/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide9 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(-650px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide10 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(650px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide11 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(-650px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide12 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(-650px); /* Move element up */
  }
}
/* Keyframes for scaling, opacity, and slide animation */
@keyframes scaleOpacitySlide13 {
  to {
      transform: scale(1); /* Scale up to 1 */
      opacity: 1; /* Opacity from 0 to 100 */
      transform: translatex(0); /* Move element from top to bottom */
  }

  from {
      transform: scale(0.8); /* Start scaling from 0.8 */
      opacity: 0.6; /* Start opacity at 0 */
      transform: translatex(650px); /* Move element up */
  }
}

/*start sub header svg css*/
.sub-header-svg {
  width: 82px;
  height: 114px;
}

.sub-header-svg-1 {
  width: 47px;
  height: 78px;
}
.subheader-svg-2 {
  height: 110px;
  width: 105px;
}
/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  /*.sub-header-svg {
      width: 40px;*/ /* Adjust width */
      /*height: 55px;*/ /* Adjust height for mobile */
  /*}*/
  .sub-header-svg {
      width: 62px;
      height: 86px;
  }
  .sub-header-svg-1 {
      width: 32px; /* Adjust width */
      height: 55px; /* Adjust height for mobile */
  }
  .subheader-svg-2 {
      height: 82px;
      width: 78px;
  }
}

/*start delivery svg css*/
.derlivery-svg {
  width: 62px;
  height: auto;
}

/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  .derlivery-svg {
      width: 35px; /* Adjust width */
      height: 35px; /* Adjust height for mobile */
  }
}

/*start close icon svg css*/
.close-svg {
  width: 50px;
  height: 50px;
}

/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  .close-svg {
      width: 30px; /* Adjust width */
      height: 30px; /* Adjust height for mobile */
  }
}
/*start logo svg css*/
#logo-svg {
  width: 106px;
  height: 70px;
}

/* Media query for mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  #logo-svg {
      width: 67px; /* Adjust width */
      height: 44px; /* Adjust height for mobile */
  }
}
#authOverlay {
  z-index: 999999999 !important;
}
#authOverlay-1 {
  z-index: 999999999 !important;
}
.mobile-menu-css {
  z-index: 999999999 !important;
}
[dir="rtl"] .derlivery-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .custom-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .about-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .section-5-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .nav-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .bread-svg {
  transform: scaleX(-1);
}
[dir="rtl"] .desktop-menu-svg {
  transform: scaleX(-1);
}
.cs-swiper{
  column-gap:2rem;
}
.cs-swiper-box {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.product-divide-x {
  border-left-width: calc(2px* calc(1 - var(--tw-divide-x-reverse))) !important;
  height: 30px !important;
}
.header-111 {
  background-color: rgb(4 80 52) !important;
}
/* Define the chat-hidden class */
.chat-hidden {
  display: none;
}

/* Chat Box Transition */
#chat-box {
  transition: opacity 1.5s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(20px);
}

  #chat-box:not(.chat-hidden) {
      opacity: 1;
      transform: translateY(0);
  }
  @media screen and (max-width: 1340px) and (min-width: 941px) {
    .cs-margin {
       margin-left: 4rem;
     }
   }
   @media screen and (max-width: 1499px) and (min-width: 1340px) {
    .cs-margin {
       margin-left: 6rem;
     }
   }
  @media screen and (max-width: 1800px) and (min-width: 1500px) {
   .cs-margin {
      margin-left: 9rem;
    }
  }
  @media screen and (max-width: 2000px) and (min-width: 1801px) {
    .cs-margin {
       margin-left: 20rem;
     }
   }
   .map-cs{
    width: 100%;
    height: 100%;
   }
   @media screen and (max-width: 700px) {
    .map-cs{
      width: 100%;
      height: 350px;
     }
   }

@media screen and (max-width: 1800px) and (min-width: 1289px) {
    .previewcs-p{
      left: 14% !important;
    }
   }

   @media screen and (min-width: 1801px) {
    .previewcs-p{
      left: 13% !important;
    }
  }
  @media screen and (min-width: 2001px) {
    .previewcs-p{
      left: 22% !important;
    }
    .sipwer-rightm{
      margin-right: 15px !important;
    }
  }
  @media screen and (min-width: 2082px) {
    .previewcs-p{
      left: 28% !important;
    }
    
  }
 
/*my new nav css*/
/*my new nav css*/
.nav-item.active a {
  color: #000000; /* Change text color for active item */
  transition: color 0.3s ease;
}

/* Ensure SVG and text are aligned horizontally */
.nav-item {
  display: flex;
  align-items: center;
  position: relative; /* Needed for absolute positioning of SVG */
}

/* SVG transition styles */
/* Default SVG state (hidden and no space taken) */
.nav-item {
  position: relative; /* Ensure positioning for absolute child */
}

.nav-item svg {
  margin-top: -0.5rem;
  position: absolute; /* Remove from document flow */
  left: -1.5rem; /* Adjust position relative to text */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* Active state (visible and positioned correctly) */
.nav-item.active svg {
  position: static; /* Bring it back to normal flow */
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0.2s;
}
/*start mobile menu css*/
@media screen and (max-width: 1023px) and (min-width: 300px) {
  ul.navMenu li {
    padding: 10px 10px 6px 0px;
    /* border-bottom: 1px solid; */
    width: 90%;
    border-bottom: #757675 1px solid;
}
#section-3-overlap{
  z-index: 40;
}
 }
  /* Ensure items are hidden initially */
/*start object svg css*/
.object-svg{
  height: 46px;
  width: 47px;
}
@media screen and (max-width: 1023px) and (min-width: 300px) {
  .object-svg{
    height: 27px;
    width: 26px;
  }
  .services-svg{
    width:55px;
  }
    .dektop-lang {
        font-size: 11px;
        padding-left: 6px;
        padding-right: 6px;
    }
    button#searchIcon svg {
        height: 30px;
    }
    span#currencyText {
        background-color: transparent;
    }
        span#currencyText svg {
            height: 15px;
            background: transparent;
        }
    svg.my-services-svg {
        height: 60px;
        width: 60px;
    }
 }
/*end object svg css*/
.active { color: #B6A999; font-weight: bold; }

.team-card {
  width: calc(100% - 1rem); /* Full width minus padding on mobile */
}

@media (min-width: 768px) {
  .team-card {
    width: calc(33.333% - 1rem); /* 3 cards with gap */
  }
  .mobile-lang{
    display: none;
  }
}

.no-scroll {
  overflow: hidden;
}
@media (max-width: 1023px) {
    .navMenu {
        max-height: 100vh;
        overflow-y: auto;
    }

    ul.navMenu li ul li {
        border-bottom: none !important;
    }
}
/*start new sub menu css*/
@media (min-width: 1023px) {
    .dropdown-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        height: 20rem;
    }

        .dropdown-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

    .navMenu {
        position: relative;
        z-index: 50;
    }

    .has-dropdown:hover .dropdown-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

 input {
    background-color: transparent;
    color: white;
    
  }

  input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 100000s ease-in-out 0s;
  }

/*strat portfolio horizontal scroll css*/

.factsContainer {
    overflow: hidden;
}
.factsContainer_sm {
    display: flex;
    overflow: visible;
}
.fact {
    flex: 0 0 100%;
  
}