/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
html {
  scroll-behavior: smooth;
  font-family: "Inter-Bold", Helvetica !important;

}

.desktop-EN .primary-button-with {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  position: relative;
  background-color: var(--primary);
  border-radius: 23px;
}

.desktop-EN .label {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .icons {
  position: relative;
  width: 15px;
  height: 14px;
  transform: rotate(180deg);
}

.desktop-EN .envelope {

  width: 15px;
  height: 14px;

  transform: rotate(-180deg);
}


.desktop-EN .menu {
  /*
  position: fixed;
  */
  width: 21px;
  height: 21px;
  top: 23px;
  border-radius: 10.5px;
  right: 2%;
}

.desktop-EN .vector {
  position: absolute;
  width: 21px;
  height: 21px;
  top: 0px;
  left: 0px;
}






.desktop-EN .active_url {
  position: relative !important;
  width: 78px;
  height: 33px;
  top: 0 !important;
  background-color: var(--accent);
  border-radius: 23px;
  color: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* Mobile nav container */
nav.mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1000;
  right: 2%;
    top:9px;

}

/* Menu button */
nav.mobile .menu button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Dropdown container */
/*#mobileMenu {
    width: 94%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 4% !important;
    margin-left: -90% !important;
    position: fixed;
}*/
#mobileMenu {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 4% !important;
    margin-left: -17% !important;
    position: fixed;
}

/* Links inside dropdown */
#mobileMenu .mobile-link {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

/* Hover effect */
#mobileMenu .mobile-link:hover {
  background-color: var(--accent);
  color: white;
}

/* Active link style */
#mobileMenu .mobile-link.active_url {
  background-color: var(--accent);
  color: white;
}

/* Optional: add gap between links */
#mobileMenu .mobile-link + .mobile-link {
  border-top: 1px solid #f0f0f0;
}


.desktop-EN .text-wrapper{
  position: relative;
  top: 8px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
    white-space: nowrap;
}





.desktop-EN .social-icons a {
  color: #333; /* default color */
  font-size: 24px;
  transition: color 0.3s;
}

.desktop-EN .social-icons a:hover {
  color: #0077b5; /* change color on hover */
}

.desktop-EN .group-3 {top: 541px;
  position: absolute;

  display: flex;
  flex-direction: column;
  gap: 15px;
  right: 48px;
}

.desktop-EN .text-wrapper-5 {
  transform: rotate(-90deg);

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}



.desktop-EN .sidi-jaber-company {
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 48px;
  letter-spacing: 0;
  line-height: normal;
}


@media (max-width: 767.98px) {
  .desktop-EN .sidi-jaber-company {
    font-size: 40px;
  }
}



.desktop-EN .overlap-2 {
  position: relative;
  width: 100%;
height: fit-content;
  top: 1476px;
  left: 0;
background-color: #eff5fb;
  background-size: 100% 100%;
}
.desktop-EN .overlap-25 {
  position: absolute;
  width: 100%;
  height: 812px;
  left: 0;
  background-color: #eff5fb;
  background-size: 100% 100%;
}





.desktop-EN .overlap-wrapper {
  position: absolute;
  width: 286px;
  height: 361px;
  top: 364px;
  left: 120px;
}



.desktop-EN .text-wrapper-8 {
  position: absolute;
  width: 115px;
  top: 212px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-color);
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}


.desktop-EN .overlap-group-wrapper {
  position: absolute;
  width: 286px;
  height: 361px;
  top: 364px;
  left: 732px;
}



.desktop-EN .text-wrapper-10 {
  position: absolute;
  width: 167px;
  top: 212px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}

.desktop-EN .div-wrapper {
  position: absolute;
  width: 286px;
  height: 268px;
  top: 364px;
  left: 426px;
}

.desktop-EN .overlap-5 {
  position: relative;
  width: 282px;
  height: 268px;
  background-image: url(./img/quality.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.desktop-EN .text-wrapper-11 {
  width: 115px;
  top: 134px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  line-height: 12px;
  position: absolute;
  letter-spacing: 0;
}

.desktop-EN .text-wrapper-12 {
  position: absolute;
  width: 215px;
  top: 171px;
  left: 33px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  color: white;
}

.desktop-EN .group-4 {
  position: absolute;
  width: 286px;
  height: 268px;
  top: 364px;
  left: 1038px;
}

.desktop-EN .overlap-6 {
  position: relative;
  width: 282px;
  height: 268px;
  background-image: url(./img/reliability.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.desktop-EN .text-wrapper-13 {
  position: absolute;
  width: 147px;
  top: 134px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}

.desktop-EN .text-wrapper-14 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}




.desktop-EN .subtract-2 {
  position: absolute;
  width: 100%;
  height: 812px;
  top: 0;
  left: 0;
}


.desktop-EN .expand-arrows {

  background-image: url(./img/vector-3.svg);
  background-size: 100% 100%;
}

.desktop-EN .vector-2 {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 0;
  left: 0;
}

.desktop-EN .subtract-4 {
  position: relative;
  width: 131px;
  height: 124px;
  top: 135px;
  left: 112px;
}

.desktop-EN .subtract-5 {
  position: relative;
  width: 131px;
  height: 124px;
  top: 1%;
  left: 1%;
}



.desktop-EN .subtract-7 {
  position: relative;
  width: 77px;
  height: 73px;
  top: 1%;
  left: 1%;
}

.desktop-EN .text-wrapper-15 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;

}

.desktop-EN .text-wrapper-16 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--accent);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop-EN .text-wrapper-17 {

    word-break: break-word; /* allows long words to wrap */
    line-height: 1.5;
    font-family: "Inter-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--primary);
    font-size: 36px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.desktop-EN .group-5 {
  position: absolute;
  width: 269px;
  height: 396px;

  top: 1%;
  left: 15%;
}



.desktop-EN .text-wrapper-19 {
  position: relative;
  width: 265px;
  top: 50px;
  left: 0;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-color);
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  text-align: justify;
}



.desktop-EN .arrow {
  left: 80px;
  position: absolute;
  width: 16px;
  height: 15px;
  top: 56px;
}

.desktop-EN .arrow-2 {
  left: 29px;
  position: absolute;
  width: 16px;
  height: 15px;
  top: 56px;
}

.desktop-EN .ellipse {
  position: absolute;
  width: 7px;
  height: 7px;
  top: 329px;
  left: 155px;
  background-color: #ffffff;
  border-radius: 3.5px;
}

.desktop-EN .ellipse-2 {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 330px;
  left: 175px;
  background-color: #ffffff80;
  border-radius: 2.5px;
  aspect-ratio: 1;
}

.desktop-EN .ellipse-3 {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 330px;
  left: 195px;
  background-color: #ffffff80;
  border-radius: 2.5px;
  aspect-ratio: 1;
}


.desktop-EN .overlap-9 {
  position: relative;
  width: 100%;
  height: 586px;

  left: -84px;
}

.desktop-EN .group-6 {
  position: relative;
  width: 100%;
  height: 567px;
  top: 70px;
  left: 0;
}



.desktop-EN .text-wrapper-21 {
  width: 59%;
  top: 51px;
  left: 408px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;

  line-height: normal;
}

.desktop-EN .overlap-10 {
  position: relative;
  height: 142px;
   top: 10%;
  left: 408px;
}

.desktop-EN .text-wrapper-22 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--accent);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}



.desktop-EN .text-wrapper-23 {
  position: absolute;
  width: 59%;
  top: 7%;
  left: 408px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .subtract-8 {
  position: absolute;
  width: 261px;
  height: 268px;
  top: 0;
  left: 95%;
}




.desktop-EN .subtract-11 {
  position: absolute;
  width: 198px;
  height: 268px;
  top: 299px;
  left:-4%
}








.desktop-EN .text-wrapper-25 {

  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .subtract-12 {
  position: relative;
  width: 131px;
  height: 124px;
  top: 10%;
  left: 72%;

}

.desktop-EN .subtract-13 {
  position: relative;
  width: 104px;
  height: 99px;
  top: -7%;
  left: 32%;

}

.desktop-EN .subtract-14 {
  position: relative;
  width: 71px;
  height: 68px;
  top: 4%;
  left: 60%;
}

.desktop-EN .subtract-15 {
  position: relative;
  width: 42px;
  height: 40px;
  top: 16%;
  left: 7%;
}

.desktop-EN .subtract-16 {
  position: relative;
  width: 35px;
  height: 33px;
  top: -11%;
  left: 5%;

}

.desktop-EN .overlap-11 {
  position: relative;
  width: 282px;
  height: 268px;
  background-image: url(./img/descriptions.svg);
  background-size: 100% 100%;
}

.desktop-EN .subtract-17 {
  position: absolute;
  width: 35px;
  height: 33px;
  top: 16px;
  left: 230px;
}

.desktop-EN .group-7 {
  position: absolute;
  width: 282px;
  height: 268px;
  top: 0;
  left: 0;

}


.desktop-EN .text-wrapper-26 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .address-tripoli-qasr {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--primary);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;

}

.desktop-EN .text-wrapper-27 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .group-8 {
  position: absolute;
  width: 100%;
  height: 751px;
  top: 0;
  left: 0;
}

.desktop-EN .group-9 {
  position: relative;
  max-width: 506px;
  height: 612px;

}


.desktop-EN .overlap-13 {
  position: relative;
  height: 612px;
  background-color: #f4f9fd;
  border-radius: 25px;
}

.desktop-EN .text-wrapper-32 {
  position: relative;
  width: 224px;
  top: 4%;
  left: 5%;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}



.desktop-EN .overlap-15 {
  position: absolute;
  width: 426px;
  height: 43px;
  top: 207px;
  left: 30px;
  background-color: #ffffff;
  border-radius: 23px;
  border: 1px solid;
  border-color: var(--bg);
}

.desktop-EN .text-wrapper-35 {
  position: absolute;
  width: 169px;
  top: 12px;
  left: 48px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .vector-3 {
  position: absolute;
  width: 18px;
  height: 16px;
  top: 13px;
  left: 17px;
}

.desktop-EN .overlap-16 {
  position: absolute;
  width: 426px;
  height: 43px;
  top: 489px;
  left: 30px;
  background-color: var(--primary);
  border-radius: 23px;
}

.desktop-EN .text-wrapper-36 {
  position: absolute;
  top: 13px;
  left: 194px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .overlap-17 {
  position: absolute;
  width: 426px;
  height: 43px;
  top: 264px;
  left: 30px;
  background-color: #ffffff;
  border-radius: 23px;
  border: 1px solid;
  border-color: var(--bg);
}

.desktop-EN .line {
  width: 1px;
  height: 42px;
  top: -1px;
  left: 83px;
  position: absolute;
  object-fit: cover;
}

.desktop-EN .text-wrapper-37 {
  width: 169px;
  top: 12px;
  left: 101px;
  color: var(--bg);
  font-size: 14px;
  line-height: normal;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
}


.desktop-EN .vector-4 {
  position: absolute;
  width: 13px;
  height: 6px;
  top: 18px;
  left: 58px;
}

.desktop-EN .overlap-18 {
  position: absolute;
  width: 426px;
  height: 153px;
  top: 321px;
  left: 30px;
  background-color: #ffffff;
  border-radius: 23px;
  border: 1px solid;
  border-color: var(--bg);
}

.desktop-EN .text-wrapper-39 {
  position: absolute;
  width: 169px;
  top: 17px;
  left: 17px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .overlap-group-2 {
  position: absolute;
  width: 208px;
  height: 43px;
  top: 150px;
  left: 248px;
  background-color: #ffffff;
  border-radius: 23px;
  border: 1px solid;
  border-color: var(--bg);
}

.desktop-EN .text-wrapper-40 {
  position: absolute;
  width: 169px;
  top: 12px;
  left: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}




.desktop-EN .text-wrapper-41 {
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #3b7bae;
}

.desktop-EN .group-10 {
  position: relative;
  width: 286px;
  height: 205px;
  top: auto;
}

.desktop-EN .overlap-19 {
  position: relative;
  top: auto;
  width: 282px;
  height: 205px;
  background-image: url(./img/supply.svg);
  background-size: 100% 100%;
}

.desktop-EN .supply-wrapper {
  position: absolute;
  width: 51px;
  height: 51px;
  top: 36px;
  left: 44px;
  background-color: #195a8e;
  border-radius: 25.5px;
}

.desktop-EN .supply {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 10px;
  left: 10px;
}

.desktop-EN .text-wrapper-42 {
  top: 111px;
  left: 44px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  line-height: 12px;
  position: absolute;
  letter-spacing: 0;
}

.desktop-EN .text-wrapper-43 {
  position: relative;
  width: 220px;
  top: 138px;
  left: 46px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  text-align: initial;
}

.desktop-EN .subtract-18 {
  position: absolute;
  width: 35px;
  height: 33px;
  top: 16px;
  left: 231px;
}

.desktop-EN .group-11 {
  position: relative;
  width: 286px;
  height: 268px;
  top: auto;
}

.desktop-EN .overlap-20 {
  position: relative;
  width: 282px;
  height: 268px;
  background-image: url(./img/logistic.svg);
  background-size: 100% 100%;
}

.desktop-EN .logistic-wrapper {
  position: absolute;
  width: 51px;
  height: 51px;
  top: 83px;
  left: 32px;
  background-color: #195a8e;
  border-radius: 25.5px;
}

.desktop-EN .logistic {
  position: absolute;
  width: 35px;
  height: 25px;
  top: 13px;
  left: 8px;
}

.desktop-EN .text-wrapper-44 {
  position: absolute;
  width: 164px;
  top: 158px;
  left: 22px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;

}



.desktop-EN .text-wrapper-46 {
  position: absolute;
  top: 4142px;
  left: -453px;
  font-family: var(--EN-h3-font-family);
  font-weight: var(--EN-h3-font-weight);
  color: transparent;
  font-size: var(--EN-h3-font-size);
  letter-spacing: var(--EN-h3-letter-spacing);
  line-height: var(--EN-h3-line-height);
  white-space: nowrap;
  font-style: var(--EN-h3-font-style);
}

.desktop-EN .group-12 {
  position: relative;
  width: 185px;
  height: 38px;

}

.desktop-EN .overlap-21 {
  position: relative;
  width: 183px;
  height: 38px;
  background-color: var(--primary);
  border-radius: 26px;
}

.desktop-EN .document {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 11px;
  left: 26px;
}

.desktop-EN .vector-5 {
  position: absolute;
  width: 14px;
  height: 17px;
  top: 0;
  left: 1px;
}

.desktop-EN .download-profile {
  position: absolute;
  width: 103px;
  top: 14px;
  left: 50px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

.desktop-EN .group-13 {
  position: relative;
  width: 286px;
  height: 205px;
  top: auto;
}

.desktop-EN .overlap-22 {
  position: relative;
  width: 282px;
  height: 205px;
  background-image: url(./img/processing.svg);
  background-size: 100% 100%;
}

.desktop-EN .processing-wrapper {
  position: absolute;
  width: 51px;
  height: 51px;
  top: 33px;
  left: 41px;
  background-color: #195a8e;
  border-radius: 25.5px;
}

.desktop-EN .processing {
  position: relative;
  width: 30px;
  height: 26px;
  top: 7px;
  left: 2px;
  background-image: url(./img/vector-2.svg);
  background-size: 100% 100%;
}

.desktop-EN .text-wrapper-47 {
  position: absolute;
  width: 164px;
  top: 108px;
  left: 41px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}

.desktop-EN .text-wrapper-48 {
  position: absolute;
  width: 183px;
  top: 135px;
  left: 41px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  text-align: initial;
}

.desktop-EN .subtract-19 {
  position: absolute;
  width: 35px;
  height: 33px;
  top: 10%;
  left: 82%;
}

.desktop-EN .footer {

  background-color: transparent;

}
.row.no-gutters {
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: var(--primary);

}


.desktop-EN .rectangle-2 {
  height: 100%;
  top: 6%;
  position: absolute;
  width: 100%;
  left: 0;
}





.desktop-EN .overlap-group-3 {
  position: relative;
  width: 14px;
  height: 16px;
  left: 1px;
}

.desktop-EN .vector-6 {
  position: absolute;

  left: 2px;
  transform: rotate(90.00deg);
}

.desktop-EN .vector-7 {
  position: absolute;
  width: 16px;
  height: 8px;
  top: 4px;
  left: -4px;
  transform: rotate(90.00deg);
}


.desktop-EN .overlap-24 {
  position: relative;
  width: 183px;
  height: 38px;
  background-color: var(--variable-collection-color);
  border-radius: 26px;
  top: 100%;
}

.desktop-EN .download-profile-2 {
  position: absolute;
  width: 103px;
  top: 14px;
  left: 50px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}





.desktop-EN .text-wrapper-50 {
  font-family: "Inter-Regular", Helvetica;
}

.desktop-EN .text-wrapper-51 {
  position: relative;

  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}


.desktop-EN .company-about-us-our {

  font-family: "Inter-Bold", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  width: fit-content;
}

.desktop-EN .text-wrapper-52 {
  font-weight: 700;
  color: #cedce6;
}


.desktop-EN .text-wrapper-54 {
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
}
.desktop-EN .stay-connected-with {


  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #cedce6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}





.desktop-EN .tripoli-libya-qasr {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
}

.desktop-EN .text-wrapper-55 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff80;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}


.desktop-EN .text-wrapper-56 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

.desktop-EN .text-wrapper-57 {

  color: #ffffff80;
  font-size: 8px;
  text-align: center;
  line-height: 12px;
  white-space: nowrap;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
}

.desktop-EN .group-19 {
  width: 80px;
  height: 30px;

}

.desktop-EN .text-wrapper-58 {
  position: absolute;
  top: 0;
  left: 32px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff80;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

.desktop-EN .group-20 {
  width: 81px;
  height: 30px;

}

.desktop-EN .text-wrapper-59 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff80;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}



.desktop-EN .vector-9 {

  width: 23px;
  height: 21px;

}

.desktop-EN .phone-call {
  width: 21px;
  height: 21px;

  overflow: hidden;
  transform: rotate(-90.00deg);
}

.desktop-EN .vector-10 {
  width: 21px;
  height: 21px;

  transform: rotate(90.00deg);
}

.desktop-EN .img-wrapper {
  width: 23px;
  height: 23px;

  background-image: url(./img/printer.svg);
  background-size: 100% 100%;
}

.desktop-EN .vector-11 {

  width: 4px;
  height: 2px;

}



.desktop-EN .line-3 {
  width: 1px;
  height: 15px;
  top: 347px;
  left: 211px;
  position: absolute;
  object-fit: cover;
}



.desktop-EN .element-sidi-jaber-co {
  position: relative;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #cedce6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .text-wrapper-62 {
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #cedce6;
  font-size: 12px;
  letter-spacing: 0;
}

.desktop-EN .sidi-jaber-company-3 {

  width: 237px;
  height: 53px;

}
.left-top {
  margin-left: 54px;
  top: 1%;
  position: relative;
}
.right-buttom
{
  position: absolute;

  top: 500px;
  right:3%;
}
 .left-buttom
 {
   position: relative;
   top: 60%;
   left: -3%;
 }
.desktop-EN .section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 40px; /* control margins inside */
}

.desktop-EN .section .text {
  max-width: 50%;
}

.desktop-EN .section img {
  max-width: 45%;
  height: auto;
}

/* Keep them stacked naturally */
.text-wrapper-21 {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.overlap-10 {
  margin-bottom: 1rem;
}

.text-wrapper-22 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.the-company-focuses {
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-23 {
  font-size: 1.1rem;
  font-style: italic;
  margin-top: 1rem;
}




/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}



.desktop-EN .label {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .icons {
  position: relative;
  width: 15px;
  height: 14px;
  transform: rotate(180deg);
}



.desktop-EN .group {
  position: relative;
  width: 21px;
  height: 21px;
  background-color: var(--accent);
  border-radius: 10.5px;
}

.desktop-EN .vector {
  position: absolute;
  width: 21px;
  height: 21px;
  top: 0px;
  left: 0px;
}

.desktop-EN .group-2 {
  position: relative;
  width: 382px;
  height: 33px;

}



.desktop-EN .active {
  position: absolute;
  top: 8px;
  left: 320px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}








.desktop-EN .social-icons a {
  color: #333; /* default color */
  font-size: 24px;
  transition: color 0.3s;
}

.desktop-EN .social-icons a:hover {
  color: #0077b5; /* change color on hover */
}

.desktop-EN .group-3 {top: 541px;
  position: absolute;

  display: flex;
  flex-direction: column;
  gap: 15px;
  right: 48px;
}








.desktop-EN .p {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: white;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}


#stickyMenu {
    position: sticky;
    top: 0;
    z-index: 1050;

    background: rgba(255, 255, 255, 0.2); /* More transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* Spacing */
    padding: 1rem;

    width: 100%;
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
#home {
    background-image: url('img/Subtract-3.png');
    background-size: cover; /* or 'contain' or '100% 100%' depending on your needs */
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    height: 90vh;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);
}


/* Optional: Add shadow when scrolled */
#stickyMenu.scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.desktop-EN .sidi-jaber-company-2 {
  position: relative;
  width: 237px;
  height: 53px;
  top: auto;

}


.desktop-EN .overlap-25 {
  position: absolute;
  width: 100%;
  height: 812px;
  left: 0;
  background-color: #eff5fb;
  background-size: 100% 100%;
}

 .text-wrapper-6 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--accent);
  font-size: 16px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  letter-spacing: 0;
}

 .text-wrapper-7 {
   word-break: break-word; /* allows long words to wrap */
   line-height: 1.5;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .overlap-wrapper {
  position: absolute;
  width: 286px;
  height: 361px;
  top: 364px;
  left: 120px;
}

.desktop-EN .overlap-3 {
  position: relative;
  width: 282px;
  height: 361px;
  background-image: url(./img/safety.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.desktop-EN .text-wrapper-8 {
  position: absolute;
  width: 115px;
  top: 212px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-color);
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}

.desktop-EN .text-wrapper-9 {
  position: absolute !important;
  width: 215px;
  top: 249px !important;
  left: 33px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: white;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .overlap-group-wrapper {
  position: absolute;
  width: 286px;
  height: 361px;
  top: 364px;
  left: 732px;
}

.desktop-EN .overlap-4 {
  position: relative;
  width: 282px;
  height: 361px;
  background-image: url(./img/innovation.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.desktop-EN .text-wrapper-10 {
  position: absolute;
  width: 167px;
  top: 212px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}

.desktop-EN .div-wrapper {
  position: absolute;
  width: 286px;
  height: 268px;
  top: 364px;
  left: 426px;
}



.desktop-EN .text-wrapper-11 {
  width: 115px;
  top: 134px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  line-height: 12px;
  position: absolute;
  letter-spacing: 0;
}

.desktop-EN .text-wrapper-12 {
  position: absolute;
  width: 215px;
  top: 171px;
  left: 33px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  color: white;
}

.desktop-EN .group-4 {
  position: absolute;
  width: 286px;
  height: 268px;
  top: 364px;
  left: 1038px;
}



.desktop-EN .text-wrapper-13 {
  position: absolute;
  width: 147px;
  top: 134px;
  left: 33px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}




.desktop-EN .subtract-2 {
  position: absolute;
  width: 100%;
  height: 812px;
  top: 0;
  left: 0;
}





.desktop-EN .vector-2 {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 0;
  left: 0;
}



.subtract-6 {
  position: relative;
  width: 86px;
  height: 78px;
  top: 1px;
  left: 1%;
}




.desktop-EN .text-wrapper-18 {
  position: relative;
  width: 265px;
top:50px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  text-align: initial;
  color: white;
}



.desktop-EN .overlap-8 {
  position: relative;
  width: 127px;
  height: 127px;
  top: 44%;
  left: 0;
  border-radius: 63.5px;
  border: 1px solid;
  border-color: var(--variable-collection-color);
}
.dots{
  top: 29%;
  position: absolute;
}
.desktop-EN .arrow {
  left: 80px;
  position: absolute;
  width: 16px;
  height: 15px;
  top: 56px;
}

.desktop-EN .arrow-2 {
  left: 29px;
  position: absolute;
  width: 16px;
  height: 15px;
  top: 56px;
}

.desktop-EN .ellipse {
  position: absolute;
  width: 7px;
  height: 7px;
  top: 329px;
  left: 155px;
  background-color: #ffffff;
  border-radius: 3.5px;
}

.desktop-EN .ellipse-2 {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 330px;
  left: 175px;
  background-color: #ffffff80;
  border-radius: 2.5px;
  aspect-ratio: 1;
}

.desktop-EN .ellipse-3 {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 330px;
  left: 195px;
  background-color: #ffffff80;
  border-radius: 2.5px;
  aspect-ratio: 1;
}

.desktop-EN .overlap-9 {
  position: absolute;
  width: 100%;
  height: 586px;
  top: 869px;
  left: -84px;
}













.desktop-EN .text-wrapper-23 {
  position: absolute;
  width: 59%;
  top: 7%;
  left: 408px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .subtract-8 {
  position: absolute;
  width: 261px;
  height: 268px;
  top: 0;
  left: 95%;
}

.desktop-EN .subtract-9 {
  position: absolute;
  width: 148px;
  height: 141px;
  top: 12px;
}

.desktop-EN .subtract-10 {
  position: absolute;
  width: 97px;
  height: 92px;
  top: 419px;
  left:  86%;
}








.desktop-EN .text-wrapper-24 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .opposite_square {
    --cut1: 87px !important;
    --cut2: 107px !important;
  }
}




.desktop-EN .subtract-17 {
  position: absolute;
  width: 35px;
  height: 33px;
  top: 16px;
  left: 230px;
}

.desktop-EN .group-7 {
  position: absolute;
  width: 282px;
  height: 268px;
  top: 0;
  left: 0;

}



.desktop-EN .text-wrapper-28 {

  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop-EN .text-wrapper-29 {

  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop-EN .text-wrapper-30 {

  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .text-wrapper-31 {

  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop-EN .group-8 {
  position: absolute;
  width: 100%;
  height: 751px;
  top: 0;
  left: 0;
}







.desktop-EN .text-wrapper-33 {
  position: absolute;
  width: 187px;
  top: 99px;
  left: 30px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .overlap-14 {
  position: absolute;
  width: 208px;
  height: 43px;
  top: 150px;
  left: 30px;
  border-radius: 23px;
  border: 1px solid;
  border-color: var(--bg);
}

.desktop-EN .text-wrapper-34 {
  position: absolute;
  width: 169px;
  top: 12px;
  left: 17px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;

}




.desktop-EN .text-wrapper-38 {
  position: absolute;
  width: 37px;
  top: 12px;
  left: 17px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--primary);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}





.desktop-EN .by-contacting-us-you {
  position: absolute;
  width: 281px;
  top: 552px;
  left: 103px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}




.desktop-EN .subtract-18 {
  position: absolute;
  width: 35px;
  height: 33px;
  top: 16px;
  left: 231px;
}

.desktop-EN .overlap-20 {
  position: relative;
  width: 282px;
  height: 268px;
  background-image: url(./img/logistic.svg);
  background-size: 100% 100%;
}

.desktop-EN .logistic-wrapper {
  position: absolute;
  width: 51px;
  height: 51px;
  top: 83px;
  left: 32px;
  background-color: #195a8e;
  border-radius: 25.5px;
}

.desktop-EN .logistic {
  position: absolute;
  width: 35px;
  height: 25px;
  top: 13px;
  left: 8px;
}


.desktop-EN .text-wrapper-45 {
  position: absolute;
  width: 198px;
  top: 185px;
  left: 43px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  text-align: initial;
}

.desktop-EN .text-wrapper-46 {
  position: absolute;
  top: 4142px;
  left: -453px;
  font-family: var(--EN-h3-font-family);
  font-weight: var(--EN-h3-font-weight);
  color: transparent;
  font-size: var(--EN-h3-font-size);
  letter-spacing: var(--EN-h3-letter-spacing);
  line-height: var(--EN-h3-line-height);
  white-space: nowrap;
  font-style: var(--EN-h3-font-style);
}




.desktop-EN .vector-5 {
  position: absolute;
  width: 14px;
  height: 17px;
  top: 0;
  left: 1px;
}

.desktop-EN .download-profile {
  position: absolute;
  width: 103px;
  top: 14px;
  left: 50px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}



.desktop-EN .processing-wrapper {
  position: absolute;
  width: 51px;
  height: 51px;
  top: 33px;
  left: 41px;
  background-color: #195a8e;
  border-radius: 25.5px;
}

.desktop-EN .text-wrapper-47 {
  position: absolute;
  width: 164px;
  top: 108px;
  left: 41px;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 12px;
}





.desktop-EN .overlap-23 {
  position: relative;
  width: 100%;

}



.desktop-EN .angle-double-right-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  top: -24px;
  left: 46%;
  background-color: var(--accent);
  border-radius: 24px;

}

.desktop-EN .angle-double-right {
  position: relative;
  width: 16px;
  height: 16px;
  top: 16px;
  left: 4px;
  transform: rotate(-90.00deg);
}

.desktop-EN .overlap-group-3 {
  position: relative;
  width: 14px;
  height: 16px;
  left: 1px;
}

.desktop-EN .vector-6 {
  position: absolute;

  left: 2px;
  transform: rotate(90.00deg);
}

.desktop-EN .vector-7 {
  position: absolute;
  width: 16px;
  height: 8px;
  top: 4px;
  left: -4px;
  transform: rotate(90.00deg);
}

.desktop-EN .group-14 {
  width: 100%;
  height: 38px;
}
@media (max-width: 768px) {
  .footer_contact{
    flex-direction: unset!important;
  }
  .sidi-jaber-company
  {
    width: 100%!important;
  }

}



.desktop-EN .download-profile-2 {
  position: absolute;
  width: 103px;
  top: 14px;
  left: 50px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: var(--primary);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}

.desktop-EN .legal-information {
  font-family: "Inter-Bold", Helvetica;
  font-weight: 400;
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  width: fit-content;
}

.desktop-EN .text-wrapper-49 {
  font-weight: 700;
}

.desktop-EN .text-wrapper-50 {
  font-family: "Inter-Regular", Helvetica;
}






.desktop-EN .text-wrapper-53 {
  font-family: "Inter-Regular", Helvetica;
  color: #cedce6;
}






.desktop-EN .group-16 {

  width: 404px;
  height: 76px;

}

.desktop-EN .group-17 {

  width: 85px;
  height: 45px;

}



.desktop-EN .group-18 {

  width: 80px;
  height: 30px;

}




.desktop-EN .text-wrapper-58 {
  position: absolute;
  top: 0;
  left: 32px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff80;
  font-size: 8px;
  text-align: center;
  letter-spacing: 0;
  line-height: 12px;
  white-space: nowrap;
}





.desktop-EN .vector-8 {
  width: 23px;
  height: 23px;

}





.desktop-EN .line-2 {
  width: 100%;
  height: 1px;
  top: 325px;
  left: 0;
  position: absolute;
  object-fit: cover;
}

.desktop-EN .text-wrapper-60 {
  position: relative;
margin-left: 11%;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-EN .text-wrapper-61 {
  position: relative;
margin-left: 6%;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #cedce6;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}



.desktop-EN .text-wrapper-62 {
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #cedce6;
  font-size: 12px;
  letter-spacing: 0;
}

.language-switcher {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.language-switcher .dropdown {
  display: none;
  position: absolute;
  top: 110%; /* below the icon */
  right: 0;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 5px 0;
  margin: 0;
  min-width: 70px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  list-style: none;
  transition: all 0.3s ease;
  z-index: 10;
}

.language-switcher .dropdown li {
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 6px;
    margin: 2px 6px;

    /* Remove border + minimal style */
    background: transparent;

    /* Smaller text */
    font-size: 13px;
    font-weight: 500;
    color: #444;

    transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}

/* Elegant hover */
.language-switcher .dropdown li:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #000;
    transform: translateY(-1px);
}




/* Show dropdown on hover */
/*.language-switcher:hover .dropdown {
  display: block;
}*/


.right-top
{
  position: relative;
  width: 261px;
  height: 268px;
  top: 10%;
  left: 87%;

}
.desktop-EN .section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 40px; /* control margins inside */
}

.desktop-EN .section .text {
  max-width: 50%;
}

.desktop-EN .section img {
  max-width: 45%;
  height: auto;
}


/* Keep them stacked naturally */
.text-wrapper-21 {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.overlap-10 {
  margin-bottom: 1rem;
}

.text-wrapper-22 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}


.text-wrapper-23 {
  font-size: 1.1rem;
  font-style: italic;
  margin-top: 1rem;
}



/* Optional: spacing between sections */
.overlap-2 + .overlap-3,
.overlap-3 + .overlap-4,
.overlap-4 + .overlap-5,
.overlap-5 + .overlap-6,
.overlap-6 + .overlap-7,
.overlap-7 + .overlap-8,
.overlap-8 + .overlap-9,
.overlap-9 + .overlap-10,
.overlap-10 + .overlap-11,
.overlap-11 + .overlap-12,
.overlap-25 {
  margin-top: 60px;  /* space between sections */
}


.overlap-3
.overlap-4 p,
.overlap-5 .container-fluid,.overlap-25 {
  position: relative !important;  /* flow inside parent */
  top: auto !important;
  left: auto;
  margin: 0;
}

/* Optional: images or decorative elements inside sections */
.overlap-2 img,
.overlap-3 img,
.overlap-4 img {
  position: relative !important; /* prevent them from floating outside */
  max-width: 100%;
  height: auto;
}



.row.no-gutters > [class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}



/* === Overrides for responsiveness === */

/*!* Background image *!
.desktop-EN .subtract-3 {
  width: 56% !important;        !* replaces 996px *!
  height: auto !important;      !* keep aspect ratio *!

}

!* Small expand icon *!
.desktop-EN .expand-arrows {
  width: 2vw !important;        !* replaces 14px *!
  height: 2vw !important;
  top: 65% !important;          !* replaces 745px *!
  left: 80% !important;         !* replaces 1102px *!
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

!* Group element *!
.desktop-EN .group-5 {
  width: 22% !important;        !* replaces 269px *!
  height: auto !important;      !* replaces 396px *!
  top: 38% !important;          !* replaces 419px *!
  left: 20% !important;         !* replaces 294px *!
}*/
.image-wrapper {
  position: relative;
  align-items: center;
  justify-content: flex-start; /* group-5 stays left of the image */
  gap: 20px; /* space between text and image */
  display: inline-block; /* so wrapper fits to image size */
  margin-top: 7%;
}

.subtract-3 {

  height: auto;
  display: block;

}

.expand-arrows {
  position: absolute;
  bottom: 106px;
  left: 82%;
}

.group-5 {
  max-width: 40%; /* adjust depending on how much text */
}
form .form-control:not(textarea),
form .input-group-text,
form button {
  border-radius: 9999px !important;
  padding: 0.75rem 1.25rem;
color: var(--primary);
}

input::placeholder,
textarea::placeholder {
  color: #999999; !important; /* your desired color */
  opacity: 1; /* some browsers make placeholders semi-transparent by default */
}
/* Standard */
input::placeholder,
textarea::placeholder {
  color: #999999; !important;
  opacity: 1; /* remove transparency */
}

/* Webkit browsers (Chrome, Safari, Edge) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b8b3b3; !important;
  opacity: 1;
}

/* Firefox */
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999999; !important;
  opacity: 1;
}

/* Internet Explorer / old Edge */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999; !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #999999; !important;
}

.input-group .number {
  border-radius:  50px 0 0 50px !important; /* sharp left, rounded right */
  border-right: 0;              /* remove border between span and input */
  padding: 0.75rem 1rem;
}

.input-group .form-control {
  border-radius:0 50px 50px 0  !important; /* rounded left, sharp right */
  border-left: 0;               /* remove border between input and span if needed */
  padding: 0.75rem 1rem;
}

/* Optional: remove double shadow/border if using Bootstrap form-control */
.input-group .form-control:focus {
  box-shadow: none;
}

/* keep textarea with normal rounded corners */
form textarea.form-control {
  border-radius: 0.75rem !important; /* softer rectangle */
  padding: 0.75rem 1rem;
}

.top-right-con{
  left: 32% !important;
  top: -22% !important;
  height: 83px !important;
}

.text-wrapper-7 .wrap {
  display: inline-block;
}
.top-right-sub {
  width: 354px !important;
  height: 191px !important;
}
.top-right-con{
  height: 146px !important;
  width: 124px !important;
  left: 53px !important;
  top: 27px !important
}
.buttom-right-con{
  height: 88px !important;
  width: auto !important;
  top: -28px !important;
  left: 31px !important;
}
.buttom-left-con{
  top: -26% !important;
  left: 25% !important;
  height: 132px !important;
}
.top-left-con{
  top: -27px !important;
  left: 44px !important;
  height: 85px !important;

}
.logistic_card
{
    top:-20%;
}
@media (max-width: 768px) {
  #home {

    clip-path: polygon(0 0, 100% 0, 100% 88%, 81% 100%, 0 100%) !important;
  }
    #services {

        clip-path: polygon(0 0, 100% 0, 100% 95%, 79% 100%, 0 100%) !important;
    }
    .logistic_card{
        top:unset;
    }


  .top-left-sub
  {
    margin-left: -79px;
    width: 87px !important;
    height: auto !important;
    margin-top: -48px !important;
  }
  .top-left-con{
    left: -27% !important;
    top: 287px !important;
    height: 61px !important;
  }
  .top-right-sub
  {
    width: 393px !important;
    height: 171px !important;
    margin-top: 223px !important;
    margin-left: 32px !important;
  }
  .top-right-con {
    height: 110px !important;
    width: 87px !important;
    left: 85px !important;
    top: -113px !important;
  }
  .buttom-right-con {
    height: 70px !important;
    width: auto !important;
    top: -115px !important;
    left: 74px !important;
  }
  .buttom-left-con {
    top: -102% !important;
    left: -4% !important;
    height: 71px !important;
  }.mobile {
     display: block !important;
   }
   .desktop {
     display: none !important;
   }
   .overlap-8{
     display: none !important;
   }
  }

.mission {
  background-image: url('img/missionbacjground.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
/*  clip-path: polygon(
          10% 0, !* cut in from top-left *! 100% 0, !* top-right *! 100% 95%, !* slightly above bottom-right *! 75% 100%, !* cut in from bottom-right *! 0 100%, !* bottom-left *! 0 3% !* slightly down from top-left *!
  );*/

}

/* For screens smaller than 992px (lg) */

/*!* For screens smaller than 992px (lg) *!
@media (max-width: 991px) {

  .desktop

  {
    display: none !important;
  }

  .subtract {

    clip-path: polygon(0 0, 100% 0, 100% 84%, 74% 100%, 0 100%);
  }







  .subtract-9 {
    position: absolute !important;
    width: 148px !important;
    height: 99px !important;
    top: -9px !important;
    left: -27% !important;
  }

  .concrete-block-d {
    position: absolute;
    top: -62px !important;
    left: 78% !important;
    width: 85px !important;
    height: auto !important;
    object-fit: cover !important;
  }





  .subtract-13 {
    position: relative;
    width: 104px;
    height: 99px;
    top: -7%;
    left: -19% !important;

  }

  .text-wrapper-25 {

    font-size: 36px;
    letter-spacing: 0;
    line-height: normal;
    width: 68%;
    line-height: 1.4;
    width: 68%;

    text-align: center;
  }



  .overlap-20 {
    top: unset !important;
  }

  .opposite_square {
    --cut1: 90px !important;
  }







  .expand-arrows {
    position: absolute;
    top: 22px;
    left: 88%;
  }

  .dots {
    top: -16%;
    position: absolute;
    left: -41% !important;
  }

  .group-5 {
    position: absolute;
    width: 269px;
    height: 396px;
    top: 39% !important;
    left: 15%;
  }

  .services {
    margin-top: -143px;
  }

  .customer_support {
    margin-left: 23% !important;
  }

  .right-top {
    position: absolute;
    width: auto !important;
    height: 168px !important;
    top: 25% !important;
    left: 91% !important;
  }

  .left-buttom {
    position: absolute !important;
    top: 42% !important;
    left: 1% !important;
    width: auto !important;
    height: 110px !important;
  }


  .text-wrapper-28,
  .text-wrapper-26,
  .address-tripoli-qasr,
  .text-wrapper-29,
  .text-wrapper-27,
  .text-wrapper-31,
  .text-wrapper-30 {
    text-align: center !important;
  }

  .left-top {
    margin-left: 8% !important;
    top: 34% !important;
    position: absolute !important;
    width: 59px !important;
    height: auto !important;
  }


  .sidi-jaber-company-3 {
    position: relative;
    width: 237px;
    height: 53px;
    top: 22% !important;
    left: -24% !important;
  }

  .company-about-us-our {
    position: relative;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    width: fit-content;
    top:-26% !important;
    left: 56% !important;
  }
  .footer_contact
  {
    margin-top: unset;
  }
  .legal-information {
    position: relative;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 400;
    color: var(--bg);
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    width: fit-content;
    top: -146% !important;
    left: 145% !important;
  }



  .line-2 {
    width: 100%;
    height: 1px;
    top: 78% !important;
    left: 0;
    position: absolute;
    object-fit: cover;
  }
  .stay-connected-with {

    right: 23% !important;
  }
  .group-16 {
    position: relative;
    width: 404px;
    height: 76px;
    right: 85% !important;
    top: 100px ;
  }
  .sidi-jaber-company-2 {
    position: absolute !important;
    width: unset !important;
    height: unset !important;
    top: 2% !important;
  }




}*/




#home .p {
  color: #f0f0f0;
  margin-bottom: 1.5rem;
}
.button {
  all: unset;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;

  border-radius: 23px;
  border: 1px solid;

  border-color: var(--variable-collection-color);
}
#home .button:hover {
  background-color: var(--accent-dark);
}

#home .social-icons a svg {
  fill: white;
  transition: transform 0.2s ease, fill 0.2s;
}

#home .social-icons a:hover svg {
  transform: scale(1.2);
  fill: var(--accent);
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  #home .right-side {
    align-items: flex-start !important; /* socials on left */
  }

  #home .social-icons {
    margin-bottom: 1.5rem;
  }


}
#home .row {
  height: 80vh;             /* match your image height */
  align-items: center;      /* vertical center */
}

#about {
  position: relative;
  padding: 100px 0;
}

/* Floating image positions */
.top-left { top: -30px; left: -30px; }
.top-right { top: -30px; right: -30px; }
.bottom-left { bottom: -30px; left: -30px; }
.bottom-right { bottom: -30px; right: -30px; }



.subtract { max-width: 60px; height: auto; }

/* Responsive: hide subtract images on mobile */
@media (max-width: 767px) {
  .subtract { display: none !important; }
  .top-left, .top-right, .bottom-left, .bottom-right {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }
}
/* For all inputs and textareas inside your form */
form input::placeholder,span.input-group-text .number,
form textarea::placeholder {
  color: #CEDCE6; /* Replace with your desired color */
  opacity: 1; /* Ensures the color is fully opaque */
}

.number
 {
  color: #CEDCE6; /* Replace with your desired color */
  opacity: 1; /* Ensures the color is fully opaque */
}

/* Optional: specifically for rounded-pill inputs */
form input.rounded-pill::placeholder,.input-group-text .number {
  color: #CEDCE6;
}

/* Optional: specifically for textarea */
form textarea::placeholder {
  color: #CEDCE6;
}
/* Inputs and textareas */
form input::placeholder,
form textarea::placeholder {
  color: #CEDCE6; /* your desired color */
  opacity: 1;      /* make sure it's fully visible */
}

/* Firefox */
form input::-moz-placeholder,
form textarea::-moz-placeholder {
  color: #CEDCE6;
  opacity: 1;
}

/* Internet Explorer 10-11 */
form input:-ms-input-placeholder,
form textarea:-ms-input-placeholder {
  color: #CEDCE6;
}

/* Microsoft Edge */
form input::-ms-input-placeholder,
form textarea::-ms-input-placeholder {
  color: #CEDCE6;
}

/* WebKit browsers (Chrome, Safari, Opera) */
form input::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder {
  color: #CEDCE6;
}
/* All text inputs inside form */
form input.form-control::placeholder {
  color: #CEDCE6 !important;  /* Add !important to override Bootstrap */
  opacity: 1;
}

/* Textarea inside form */
form textarea.form-control::placeholder {
  color: #CEDCE6 !important; /* This will now affect the textarea */
  opacity: 1;
}

/* Phone input inside input-group */
form .input-group input.form-control::placeholder {
  color: #CEDCE6 !important;
  opacity: 1;
}
.concrete-block, .text-wrapper-18,.position-absolute,.subtract-13,.subtract-14,.subtract-16,.subtract-15,.subtract-12 {
       display: none !important;
   }
@media (max-width: 768px) {


    .contact {
        right: 1px;
        position: relative;
    }
}