:root{

    --dark-black: #000000;
    --dark-blue: #091e3c;
    --navy-blue: #12202a;
    --dark-gray: #545454;
    --gray: #a6a6a6;
    --light-gray: #d9d9d9;
    --bright-gray: #e7e9ec;
    --white: #ffffff;
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}
  
  *{
    margin: 0;
    padding: 0;
  }

  body {
    margin: 0;
    overflow-x: hidden;
 }

  .logo img {
    display: block;
    width: 6rem;
    height: auto;
  }

  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }  

  body.arabic nav .main-ul{
    flex-direction: row-reverse;
  }
  
  nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  
  nav li{
    font-family: "Poppins", serif;
    text-transform: uppercase;
  }
  
  .nav-link {
    height: 100%;
    padding: 0 23px;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: var(--light-gray);
    position: relative;
    border-bottom: 2px solid transparent;
    transition: letter-spacing 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
  }

.nav-link:hover {
    color: var(--white);
    border-bottom: 2px solid var(--white);
}

  .sidebar {
    position: fixed;
    top: 0;
    right: -250px; 
    height: 100vh;
    width: 250px;
    background-color: rgba(9, 30, 60, 0.5);
    backdrop-filter: blur(12px); 
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2); 
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: right 0.3s ease-in-out; 
    z-index: 100; 
  }
  
  .sidebar.active {
    right: 0; 
  }
  
  .sidebar li {
    width: 100%;
  }
  
  .sidebar a {
    width: 100%;
    text-decoration: none;
    color: var(--white); 
    padding: 1.7rem 1.5rem;
    font-size: .95rem;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
  }
  
  .sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.2); 
  }
  
  .sidebar svg {
    fill: var(--white); 
    margin-right: 10px;
  }
  
  .menu-button {
    display: none;
    cursor: pointer;
  }
  
  .menu-button svg {
    fill: var(--white);
  }
  
.lang-dropdown {
  position: relative;
  display: inline-block;
  padding-right: 3%;
}

.lang-dropbtn {
  background-color: transparent; 
  color: var(--white);
  font-family: "Poppins", serif; 
  font-weight: 700;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  outline: none; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-caret-down{
  margin-left: .5rem;
}

.lang-dropbtn:focus,
.lang-dropbtn:active {
  outline: none;
  border: none;
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(9, 30, 60, 0.5);
  backdrop-filter: blur(12px); 
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2); 
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.lang-dropdown-item {
  color: var(--white);
  font-family: "Poppins", serif; 
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: 0.2s;
}

.lang-dropdown-content.show {
  display: block;
}

.lang-dropdown-item:hover {
  background-color: rgba(9, 30, 60, 0.7);
}

.arabic {
  text-align: right;
}

.arabic [data-translate] {
  text-align: right !important;
}
  
  @media (max-width: 1024px) {
    .hideOnMobile {
      display: none;
    }
    nav ul{
      padding-inline-end: 0;
      padding-right: 3%;
      order: 3;
    }
    .nav-link:hover{
      border-bottom: 0;
    }
    .menu-button {
      display: block; 
    }
    .lang-dropdown{
      order: 2;
      padding-right: 0%;
    }
  }
  
.landSwiper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.landSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.landSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-overlay {
  position: absolute;
  top: 38%;
  left: 5%;
}

.textbox{
  font-family: "Playfair Display", serif;
  text-align: left;
}

.textbox h1{
  color: var(--white);
  font-size: 4vw;
  font-weight: 700;
  color: var(--white);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

@media (min-width: 750px) and (max-width: 1100px){
  .text-overlay {
    top: 41%;
    left: 8%;
  }
  .textbox h1{
    font-size: 4.8vw;
  }
}

@media (max-width: 1024px){
  .sidebar a{
    font-size: 1rem;
  }
}

@media (min-width: 750px) and (max-width: 1024px){
  .lang-dropbtn{
    font-size: .91rem;
  }
  .lang-dropdown-item{
    font-size: .85rem;
  }
}

@media (min-width: 550px) and (max-width: 750px){
  .text-overlay {
    top: 41%;
    left: 10%;
  }
  .textbox h1{
    font-size: 6.5vw;
  }
  .lang-dropbtn{
    font-size: .91rem;
  }
  .lang-dropdown-item{
    font-size: .85rem;
  }
  .logo img{
    width: 5rem;
  }
  nav ul{
    padding-right: 5%;
  }
}

@media (min-width: 440px) and (max-width: 550px){
  .text-overlay {
    top: 41%;
    left: 10%;
  }
  .textbox h1{
    font-size: 7.5vw;
  }
  .lang-dropbtn{
    font-size: .95rem;
  }
  .lang-dropdown-item{
    font-size: .90rem;
  }
  .logo img{
    width: 5rem;
  }
  nav ul{
    padding-right: 5%;
  }
}

@media (max-width: 440px){
  .text-overlay {
    top: 41%;
    left: 9%;
  }
  .textbox h1{
    font-size: 8vw;
  }
  .lang-dropbtn{
    font-size: .85rem;
  }
  .lang-dropdown-item{
    font-size: .80rem;
  }
  .logo img{
    width: 5rem;
  }
  nav ul{
    padding-right: 5%;
  }
}

.hidden {
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.from-left {
  transform: translateX(-150px);
}
.from-left.show {
  transform: translateX(0);
  opacity: 1;
}

.from-right {
  transform: translateX(150px);
}
.from-right.show {
  transform: translateX(0);
  opacity: 1;
}

.from-bottom {
  transform: translateY(150px);
}
.from-bottom.show {
  transform: translateY(0);
  opacity: 1;
}

.from-top {
  transform: translateY(-150px);
}
.from-top.show {
  transform: translateY(0);
  opacity: 1;
}

.about-sec{
  background-image: url(about-back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.about-con{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8rem 6rem;
}

.about-pic {
  width: 175vw;
  overflow: hidden;
  border-radius: 1rem;
}

.about-swiper {
  width: 100%;
}

.about-textbox{
  padding-left: 2rem;
}

.about-textbox h1{
  color: var(--dark-blue);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3.6vw;
}

.about-textbox p{
  color: var(--dark-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.2vw;
  margin-top: 1rem;
}

.about-textbox button{
  background: transparent;
  border: 2px solid var(--dark-blue);
  margin-top: 1rem;
  text-transform: uppercase;
  font-family: 'Poppins', 'sans-serif';
  font-weight: 500;
  padding: 1rem 2.5rem;
  font-size: 1.2vw;
  cursor: pointer;
  transition: 0.3s;
}

.about-textbox button:hover{
  background: var(--dark-blue);
  color: var(--white);
}

@media (min-width: 750px) and (max-width: 1024px){
  .about-textbox h1{
    font-size: 4vw;
  }
  .about-textbox p{
    font-size: 1.4vw;
    margin-top: 0.70rem;
  }
  .about-textbox button{
    font-size: 1.4vw;
  }
  .about-con{
    padding: 8rem 3rem;
  }
  .about-pic{
    width: 231vw;
  }
}

@media (max-width: 750px){
  .about-pic{
    width: 75vw;
  }
}

@media (min-width: 550px) and (max-width: 750px){
  .about-textbox h1{
    font-size: 6vw;
    text-align: center;
    margin-top: 2rem;
  }
  .about-textbox p{
    font-size: 1.8vw;
    margin-top: 1rem;
    text-align: center;
  }
  .about-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-textbox button{
    font-size: 1.8vw;
  }
  .about-con{
    flex-direction: column;
    padding: 8rem 5rem;
  }
  .about-textbox{
    padding-left: 0;
  }
}

@media (min-width: 400px) and (max-width: 550px){
  .about-textbox h1{
    font-size: 7.2vw;
    text-align: center;
    margin-top: 2rem;
  }
  .about-textbox p{
    font-size: 2.4vw;
    margin-top: 1rem;
    text-align: center;
  }
  .about-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-textbox button{
    font-size: 2.4vw;
  }
  .about-con{
    flex-direction: column;
    padding: 8rem 2rem;
  }
  .about-textbox{
    padding-left: 0;
  }
}

@media (max-width: 400px){
  .about-textbox h1{
    font-size: 7.9vw;
    text-align: center;
    margin-top: 2rem;
  }
  .about-textbox p{
    font-size: 3vw;
    margin-top: 1rem;
    text-align: center;
  }
  .about-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about-textbox button{
    font-size: 3vw;
  }
  .about-con{
    flex-direction: column;
    padding: 8rem 1.5rem;
  }
  .about-textbox{
    padding-left: 0;
  }
}

.counter-panel{
  background-image: url(counter_panel.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.counter-con{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  text-align: center;
  padding: 8rem 3rem;
  flex-wrap: wrap;
}

.counter-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.counter-box h1{
  color: var(--white);
  font-family: 'Poppins', 'sans-serif';
  font-size: 4vw;
}

.counter-box p{
  color: var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
  text-transform: uppercase;
  font-size: 1.2vw;
}

.counter-box:nth-child(2){
  transition-delay: 100ms;
}

.counter-box:nth-child(3){
  transition-delay: 200ms;
}

.counter-box:nth-child(4){
  transition-delay: 300ms;
}

@media (min-width: 800px) and (max-width: 1024px){
  .counter-con{
    gap: 3rem;
  }
  .counter-box h1{
    font-size: 4.5vw;
  }
  .counter-box p{
    font-size: 1.3vw;
  }
}

@media (min-width: 550px) and (max-width: 800px){
  .counter-con{
    row-gap: 6rem;
  }
  .counter-box{
    flex-basis: 40%;
  }
  .counter-box h1{
    font-size: 6.5vw;
  }
  .counter-box p{
    font-size: 1.8vw;
  }
  .counter-box:nth-child(2){
    transition-delay: 100ms;
  }
  
  .counter-box:nth-child(3){
    transition-delay: 100ms;
  }
  
  .counter-box:nth-child(4){
    transition-delay: 200ms;
  }
}

@media (min-width: 450px) and (max-width: 550px){
  .counter-con{
    row-gap: 6rem;
  }
  .counter-box{
    flex-basis: 40%;
  }
  .counter-box h1{
    font-size: 8.5vw;
  }
  .counter-box p{
    font-size: 2.3vw;
  }
}

@media (max-width: 450px){
  .counter-con{
    row-gap: 6rem;
    flex-direction: column;
  }
  .counter-box{
    flex-basis: 40%;
  }
  .counter-box h1{
    font-size: 10.5vw;
  }
  .counter-box p{
    font-size: 3vw;
  }
  .counter-box:nth-child(2){
    transition-delay: 0ms;
  }
  
  .counter-box:nth-child(3){
    transition-delay: 0ms;
  }
  
  .counter-box:nth-child(4){
    transition-delay: 0ms;
  }
}

.services-sec{
  background-image: url(services_back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.services-head{
  padding: 5rem 9rem 0 9rem;
  text-align: center;
}

.services-head h1{
  font-family: 'Playfair Display', 'sans-serif';
  color: var(--navy-blue);
  font-size: 5vw;
}

.services-head p{
  font-family: 'Poppins', 'sans-serif';
  color: var(--dark-gray);
  font-size: 1.4vw;
}

.services{ 
  padding: 4rem 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.service{
  position: relative;
  cursor: pointer;
}

.service-pic {
  position: relative;
  display: inline-block;
}

.service-pic img {
  display: block;
  height: auto;
  width: 22vw;
  border-radius: 0.5rem;
  transition: filter 0.5s ease;
  filter: brightness(50%);
}

.service-pic:hover img {
  filter: brightness(100%);
}

.service-textbox {
  position: absolute;
  top: 81%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.service-textbox h2{
  font-family: 'Playfair Display', 'sans-serif';
  color: var(--white);
  font-size: 1.6vw;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.service-textbox p{
  font-family: 'Poppins', 'sans-serif';
  color: var(--light-gray);
  font-size: 1vw;
  margin-top: .30rem;
}

.service:nth-child(2){
  transition-delay: 200ms;
}

.service:nth-child(3){
  transition-delay: 400ms;
}

.services-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 4rem;
}

.services-btn button{
  background: transparent;
  border: 2px solid var(--navy-blue);
  color: var(--navy-blue);
  text-transform: uppercase;
  font-family: 'Poppins', 'sans-serif';
  font-weight: 600;
  padding: 1rem 2.2rem;
  cursor: pointer;
  font-size: 1.2vw;
  transition: 0.3s;
}

.services-btn button:hover{
  background: var(--navy-blue);
  color: var(--white);
}

@media (min-width: 700px) and (max-width: 1024px){
  .services-head h1{
    font-size: 6vw;
  }
  .services-head p{
    font-size: 1.6vw;
  }
  .service-pic img{
    width: 26vw;
  }
  .service-textbox h2{
    font-size: 1.8vw;
  }
  .service-textbox p{
    font-size: 1.2vw;
  }
  .services-btn button{
    font-size: 1.4vw;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .services-head{
    padding: 5rem 3rem 0 3rem;
  }
  .services-head h1{
    font-size: 8vw;
  }
  .services-head p{
    font-size: 2.4vw;
  }
  .services{
    flex-direction: column;
  }
  .service-pic img{
    width: 51vw;
  }
  .service-textbox{
    left: 39%;
  }
  .service-textbox h2{
    font-size: 3.2vw;
  }
  .service-textbox p{
    font-size: 2vw;
  }
  .services-btn button{
    font-size: 2.2vw;
  }
}

@media (max-width: 700px){
  .service:nth-child(2){
    transition-delay: 0ms;
  }
  .service:nth-child(3){
    transition-delay: 0ms;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .services-head{
    padding: 5rem 3rem 0 3rem;
  }
  .services-head h1{
    font-size: 10vw;
  }
  .services-head p{
    font-size: 2.7vw;
  }
  .services{
    padding: 4rem 1rem;
    flex-direction: column;
  }
  .service-pic img{
    width: 68vw;
  }
  .service-textbox{
    left: 39%;
  }
  .service-textbox h2{
    font-size: 4.5vw;
  }
  .service-textbox p{
    font-size: 2.6vw;
  }
  .services-btn button{
    font-size: 2.7vw;
  }
}

@media (max-width: 400px){
  .services-head{
    padding: 5rem 2rem 0 2rem;
  }
  .services-head h1{
    font-size: 11vw;
  }
  .services-head p{
    font-size: 3.5vw;
  }
  .services{
    padding: 4rem 1rem;
    flex-direction: column;
  }
  .service-pic img{
    width: 70vw;
  }
  .service-textbox{
    left: 39%;
  }
  .service-textbox h2{
    font-size: 5.6vw;
  }
  .service-textbox p{
    font-size: 3.1vw;
  }
  .services-btn button{
    font-size: 3.5vw;
  }
}

.machinery-sec{
  background-image: url(machinery_back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.machinery-head{
  padding: 5rem 9rem 0 9rem;
  text-align: center;
}

.machinery-head h1{
  font-family: 'Playfair Display', 'sans-serif';
  color: var(--white);
  font-size: 5vw;
}

.machinery-head p{
  font-family: 'Poppins', 'sans-serif';
  color: var(--light-gray);
  font-size: 1.4vw;
}

.machinery-con{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 4rem 3rem;
  gap: 1rem;
}

.machinery {
  backdrop-filter: blur(12px);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.machinery-pic {
  width: 100%;
  max-width: 25vw;
  overflow: hidden;
}

.machinery-swiper {
  width: 100%;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.gray-bg{
  background: rgba(217, 217, 217, .3);
}

.machinery:nth-child(2){
  transition-delay: 200ms;
}

.machinery:nth-child(3){
  transition-delay: 400ms;
}

.machinery-textbox{
  margin: 1.5rem 1rem;
}

.machinery-textbox h2{
  color: var(--white);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 1.5vw;
}

.machinery-textbox ul{
  list-style: none;
  margin-top: .85rem;
}

.machinery-textbox ul li{
  color: var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1vw;
  margin-bottom: .50rem;
}

.machinery-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 4rem;
}

.machinery-btn button{
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  text-transform: uppercase;
  font-family: 'Poppins', 'sans-serif';
  font-weight: 600;
  padding: 1rem 2.2rem;
  cursor: pointer;
  font-size: 1.2vw;
  transition: 0.3s;
}

.machinery-btn button:hover{
  background: var(--white);
  color: var(--navy-blue);
}

@media (min-width: 700px) and (max-width: 1024px){
  .machinery-head h1{
    font-size: 6vw;
  }
  .machinery-head p{
    font-size: 1.6vw;
  }
  .machinery-textbox h2{
    font-size: 1.7vw;
  }
  .machinery-textbox ul li{
    font-size: 1.2vw;
  }
  .machinery-btn button{
    font-size: 1.4vw;
  }
}

@media (min-width: 950px) and (max-width: 1024px){
  .machinery-pic{
    max-width: 28vw;
  }
}

@media (min-width: 700px) and (max-width: 950px){
  .machinery-pic{
    max-width: 28vw;
  }
  .machinery-con{
    padding: 4rem 1.5rem;
  }
}

@media (min-width: 700px) and (max-width: 800px){
  .machinery-textbox{
    margin: 1.5rem .7rem;
  }
}

@media (max-width: 700px){
  .machinery:nth-child(2){
    transition-delay: 0ms;
  }
  .machinery:nth-child(3){
    transition-delay: 0ms;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .machinery-head{
    padding: 5rem 3rem 0 3rem;
  }
  .machinery-head h1{
    font-size: 8vw;
  }
  .machinery-head p{
    font-size: 2.4vw;
  }
  .machinery-con{
    flex-direction: column;
    align-items: center;
  }
  .machinery-pic{
    max-width: 53vw;
  }
  .machinery-textbox h2{
    font-size: 2.7vw;
  }
  .machinery-textbox ul li{
    font-size: 1.8vw;
  }
  .machinery-btn button{
    font-size: 2.2vw;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .machinery-head{
    padding: 5rem 3rem 0 3rem;
  }
  .machinery-head h1{
    font-size: 10vw;
  }
  .machinery-head p{
    font-size: 2.7vw;
  }
  .machinery-con{
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem;
  }
  .machinery-pic{
    max-width: 63vw;
  }
  .machinery-textbox h2{
    font-size: 3.5vw;
  }
  .machinery-textbox ul li{
    font-size: 2.4vw;
  }
  .machinery-btn button{
    font-size: 2.7vw;
  }
}

@media (max-width: 400px){
  .machinery-head{
    padding: 5rem 2rem 0 2rem;
  }
  .machinery-head h1{
    font-size: 11vw;
  }
  .machinery-head p{
    font-size: 3.5vw;
  }
  .machinery-con{
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem;
  }
  .machinery-pic{
    max-width: 70vw;
  }
  .machinery-textbox h2{
    font-size: 4.1vw;
  }
  .machinery-textbox ul li{
    font-size: 2.8vw;
  }
  .machinery-btn button{
    font-size: 3.5vw;
  }
}

.whyus-sec{
  background-image: url(whychooseus_back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.whyus-con{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.whyus-el{
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px); 
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2); 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: .50rem;
  flex-basis: 34%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.whyus-icon{
  display: flex;
  justify-content: center;
  align-items: center;
}

.whyus-icon img{
  display: block;
  height: auto;
  width: 4vw;
}

.whyus-el h2{
  font-family: 'Playfair Display', 'sans-serif';
  color: var(--dark-black);
  font-size: 1.6vw;
  margin-top: 1rem;
}

.whyus-el p{
  font-family: 'Poppins', 'sans-serif';
  color: var(--dark-gray);
  font-size: 1.2vw;
  margin-top: .50rem;
}

@media (min-width: 700px) and (max-width: 1024px){
  .whyus-el{
    flex-basis: 35%;
  }
  .whyus-icon img{
    width: 5vw;
  }
  .whyus-el h2{
    font-size: 1.8vw;
  }
  .whyus-el p{
    font-size: 1.4vw;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .whyus-con{
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 5rem;
  }
  .whyus-icon img{
    width: 8vw;
  }
  .whyus-el h2{
    font-size: 2.5vw;
  }
  .whyus-el p{
    font-size: 2vw;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .whyus-con{
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 3rem;
  }
  .whyus-el{
    padding: 2rem 1.5rem;
  }
  .whyus-icon img{
    width: 11vw;
  }
  .whyus-el h2{
    font-size: 3.4vw;
  }
  .whyus-el p{
    font-size: 2.7vw;
  }
}

@media (max-width: 400px){
  .whyus-con{
    flex-direction: column;
    align-items: stretch;
    padding: 4rem 3rem;
  }
  .whyus-el{
    padding: 2rem 1.5rem;
  }
  .whyus-icon img{
    width: 13vw;
  }
  .whyus-el h2{
    font-size: 3.9vw;
  }
  .whyus-el p{
    font-size: 3.4vw;
  }
}

.projects-sec{
  background-image: url(projects_back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.projects-con{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 4rem 5rem;
}

.main-projects-con{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 4rem 5rem;
}

.project{
  position: relative;
  cursor: pointer;
}

.main-project{
  position: relative;
  cursor: pointer;
}

.project:nth-child(2){
  transition-delay: 200ms;
}

.project:nth-child(3){
  transition-delay: 400ms;
}

.project:nth-child(4){
  transition-delay: 200ms;
}

.project:nth-child(5){
  transition-delay: 400ms;
}

.project:nth-child(6){
  transition-delay: 600ms;
}

.project-pic {
  position: relative;
  display: inline-block;
}

.project .project-pic img{
  display: block;
  height: auto;
  width: 22vw;
  border-radius: 0.5rem;
  transition: filter 0.5s ease;
  filter: brightness(50%);
}

.main-project .project-pic img{
  display: block;
  height: auto;
  width: 37vw;
  border-radius: 0.5rem;
  transition: filter 0.5s ease;
  filter: brightness(50%);
}

.project-pic:hover img {
  filter: brightness(100%);
}

.project-num{
  position: absolute;
  top: 20%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 5.5vw;
  color: transparent;
  -webkit-text-stroke: 1px var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
}

.project-name{
  color: var(--white);
  position: absolute;
  top: 89%;
  left: 31%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 1.7vw;
  text-align: left;
  font-family: 'Playfair Display', 'sans-serif';
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.main-project-name{
  color: var(--white);
  position: absolute;
  top: 91%;
  left: 22%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 2vw;
  text-align: left;
  font-family: 'Playfair Display', 'sans-serif';
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.tr-33{
  transform: translate(-33%, -50%);
}

.lt-18{
  left: 18%;
}

.lt-37{
  left: 37%;
}

.projects-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 4rem;
}

.projects-btn button{
  background: transparent;
  border: 2px solid var(--navy-blue);
  color: var(--navy-blue);
  text-transform: uppercase;
  font-family: 'Poppins', 'sans-serif';
  font-weight: 600;
  padding: 1rem 2.2rem;
  cursor: pointer;
  font-size: 1.2vw;
  transition: 0.3s;
}

.projects-btn button:hover{
  background: var(--navy-blue);
  color: var(--white);
}

@media (min-width: 700px) and (max-width: 900px){
  .projects-con{
    padding: 4rem 3rem;
  }
  .main-projects-con{
    padding: 4rem 3rem;
  }
  .project .project-pic img{
    width: 26vw;
  }
  .main-project .project-pic img{
    width: 40vw;
  }
  .project-num{
    font-size: 7vw;
  }
  .project-name{
    font-size: 2.1vw;
  }
  .main-project-name{
    top: 90%;
    left: 26%;
    font-size: 2.4vw;
  }
  .projects-btn button{
    font-size: 1.4vw;
  }
}

@media (max-width: 700px){
  .project:nth-child(2){
    transition-delay: 0ms;
  }
  .project:nth-child(3){
    transition-delay: 0ms;
  }
  .project:nth-child(4){
    transition-delay: 0ms;
  }
  .project:nth-child(5){
    transition-delay: 0ms;
  }
  .project:nth-child(6){
    transition-delay: 0ms;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .projects-con{
    flex-direction: column;
    padding: 4rem 2rem;
  }
  .main-projects-con{
    flex-direction: column;
    padding: 4rem 2rem;
  }
  .project .project-pic img{
    width: 53vw;
  }
  .main-project .project-pic img{
    width: 65vw;
  }
  .project-num{
    font-size: 13.5vw;
  }
  .project-name{
    font-size: 3.5vw;
  }
  .main-project-name{
    font-size: 3.7vw;
  }
  .projects-btn button{
    font-size: 2.2vw;
  }
  .lt-37{
    left: 32%;
  }
  .lt-27{
    left: 27%;
  }
}

@media (max-width: 500px){
  .projects-con{
    flex-direction: column;
    padding: 4rem 1rem;
  }
  .main-projects-con{
    flex-direction: column;
    padding: 4rem 1rem;
  }
  .project .project-pic img{
    width: 69vw;
  }
  .main-project .project-pic img{
    width: 75vw;
  }
  .project-num{
    font-size: 19.5vw;
  }
  .project-name{
    font-size: 5vw;
  }
  .main-project-name{
    font-size: 5vw;
  }
  .projects-btn button{
    font-size: 2.7vw;
  }
}

@media (max-width: 400px){
  .projects-btn button{
    font-size: 3.5vw;
  }
}

.footer{
  background: var(--dark-gray);
}

.footer-links{
  padding-top: 7rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 5rem;
}

.footer-link{
  flex-basis: 20%;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
}

.footer-ul-h1{
  color: var(--white);
  font-size: 1.5rem;
  font-family: 'Playfair Display', 'sans-serif';
}

.footer-link ul{
  list-style-type: none;
}

.footer-link ul li a{
  text-decoration: none;
  color: var(--bright-gray);
  transition: 0.5s;
}

.footer-link ul li .foot-hover:hover{
  color: var(--dark-blue);
}

.footer-link ul li{
  font-size: .75rem;
  margin-top: .75rem;
  font-family: 'poppins', 'sans serif';
}

.footer-link ul li:hover{
  color: var(--white);
}

.mr-r2{
margin-right: 1.5rem;
}

.fa-chevron-right{
color: var(--dark-blue);
margin-right: 1rem;
}

.foot-mar{
  margin-right: 1rem;
}

.fa-brands{
  margin-right: 1rem;
  font-size: 1.1rem;
}

.fl-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-panel{
  background-color: var(--navy-blue);
  color: var(--white);
  padding:  1.8rem 0;
  font-weight: 500;
  font-size: .85rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-panel p{
font-family: 'Poppins', 'sans-serif';
margin: 0 1rem;
}

.footer-panel p a{
text-decoration: none;
color: var(--white);
font-weight: 700;
}

@media (min-width: 600px) and (max-width: 1024px){
  .footer-text{
      margin-left: 2rem;
  }
  .footer-h1{
      margin-left: 2rem;
      font-size: 2rem;
  }
  .footer-link{
      flex-basis: 40%;
      margin-bottom: 2rem;
      margin-right: 1rem;
  }
  .footer-ul-h1{
      font-size: 1.1rem;
  }
}


@media (max-width: 600px){
  .footer-text{
      margin-left: 0;
  }
  .footer-text .small{
      margin-left: 1.5rem;
  }
  .footer-h1{
      margin-left: 2rem;
      font-size: 1.5rem;
  }
  .footer-link{
      flex-basis: 80%;
      margin-bottom: 2rem;
      margin-right: 1rem;
  }
  .footer-ul-h1{
      font-size: 1rem;
  }
  .footer-link ul li{
      font-size: .65rem;
  }
  .footer-link p{
      font-size: .65rem;
  }
  .footer-panel{
      padding: 1.4rem 0;
      font-size: .65rem;
  }
}

.socials {
display: flex;
align-items: center;
margin: 1rem 0 0 0.45rem;
}

.social {
border: 1px solid var(--gray);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex; 
justify-content: center;
align-items: center;
margin-right: 1rem; 
}

.social a {
text-decoration: none;
color: var(--bright-gray);
font-size: 18px;
transition: 0.5s;
}

.social a:hover {
color: var(--dark-blue);
}

.social a i{
margin-right: 0;
}

.sep-header{
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.about-header{
  background-image: url(about-sep-back.jpg);
}

.services-header{
  background-image: url(services-sep-back.jpg);
}

.projects-header{
  background-image: url(projects-sep-back.jpg);
}

.machinery-header{
  background-image: url(machinery-sep-back.jpg);
}

.contact-header{
  background-image: url(contact-sep-back.jpg);
}

.gtp-header{
  background-image: url(GTP-sep-back.jpg);
}

.ss-header{
  background-image: url(ss-sep-back.jpg);
}

.cc-header{
  background-image: url(cc-sep-back.jpg);
}

.adailiya-header{
  background-image: url(adailiya-project-sep-back.jpg);
}

.westam-header{
  background-image: url(westam-project-sep-back.jpg);
}

.jahraclinic-header{
  background-image: url(jahraclinic-project-sep-back.jpg);
}

.jahra-header{
  background-image: url(jahra-project-sep-back.jpg);
}

.jtower-header{
  background-image: url(j-tower-project-sep-back.jpg);
}

.nuqratower-header{
  background-image: url(nuqra-project-sep-back.jpg);
}

.salmiya-header{
  background-image: url(salmiya-project-sep-back.jpg);
}

.marbella-header{
  background-image: url(marbella-project-sep-back.jpg);
}

.almokhaizeem-header{
  background-image: url(almokhaizeem-project-sep-back.jpg);
}

.motlaq-header{
  background-image: url(motlaqtower-back.jpg);
}

.page-links{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 44%;
}

.page-links ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
}

.mar-r55{
  margin-right: .55rem;
}

.page-links ul li a{
  text-decoration: none;
  color: var(--light-gray);
  font-size: .95vw;
  font-family: 'Poppins', 'sans serif';
}

.page-links h1{
  color: var(--white);
  font-size: 3vw;
  text-align: center;
  font-family: 'Playfair Display', 'sans serif';
}

@media (min-width: 800px) and (max-width: 1024px){
  .page-links h1{
      font-size: 4vw;
  }
  .page-links ul li a{
      font-size: 1.5vw;
  }
}

@media (min-width: 550px) and (max-width: 800px){
  .page-links h1{
      font-size: 5vw;
  }
  .page-links ul li a{
      font-size: 2vw;
  }
  .page-links{
      margin: 0 2rem;
  }
}

@media (min-width: 400px) and (max-width: 550px){
  .page-links h1{
      font-size: 7vw;
  }
  .page-links ul li a{
      font-size: 2.5vw;
  }
  .page-links{
      margin: 0 2rem;
  }
}

@media (max-width: 400px){
  .page-links h1{
      font-size: 8vw;
  }
  .page-links ul li a{
      font-size: 3vw;
  }
  .page-links{
      margin: 0 2rem;
  }
}

.mv-sec{
  background-image: url(mission_vision-back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.mv-con{
  padding: 9rem 0;
}

.mv{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4rem;
}

.mv:nth-child(2) {
  flex-direction: row-reverse;
  margin-top: 5rem;
}

.mv-el{
  display: flex;
  justify-content: start;
  align-items: center;
}

.mv-el-1{
  height: .17rem;
  width: 9rem;
  background: var(--gray);
}

.mv-el-2{
  background: var(--gray);
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 50%;
}

.mv-2{
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-left: 42%;
  justify-content: center;
  align-items: start;
}

body.arabic .mv-2{
  align-items: flex-end;
}

.mv-text h1{
  color: var(--white);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 4vw;
}

.mv-text p{
  color: var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.15vw;
  margin-top: .5rem;
}

.mr-53{
  margin-right: 53%;
}

.right-v{
text-align: right;
}

@media (min-width: 800px) and (max-width: 1024px){
  .mv-el-1{
    width: 6.5rem;
  }
  .mv-text h1{
    font-size: 5vw;
  }
  .mv-text p{
    font-size: 1.35vw;
  }
  .mv-2{
    margin-left: 33%;
  }
  .mr-53{
    margin-right: 44%;
  }
}

@media (min-width: 600px) and (max-width: 800px){
  .mv{
    gap: 3rem;
  }
  .mv-el-1{
    width: 5.5rem;
  }
  .mv-text h1{
    font-size: 6vw;
  }
  .mv-text p{
    font-size: 1.65vw;
  }
  .mv-2{
    margin-left: 28%;
  }
  .mr-53{
    margin-right: 32%;
  }
}

@media (min-width: 500px) and (max-width: 600px){
  .mv{
    gap: 2.4rem;
  }
  .mv-el-1{
    width: 4.5rem;
  }
  .mv-text h1{
    font-size: 7vw;
  }
  .mv-text p{
    font-size: 2vw;
  }
  .mv-2{
    margin-left: 14%;
  }
  .mr-53{
    margin-right: 15%;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .mv{
    gap: 2rem;
  }
  .mv-el-1{
    width: 3.5rem;
  }
  .mv-text h1{
    font-size: 8vw;
  }
  .mv-text p{
    font-size: 2.3vw;
  }
  .mv-2{
    margin-left: 8%;
  }
  .mr-53{
    margin-right: 8%;
  }
}

@media (max-width: 400px){
  .mv{
    gap: 1.5rem;
  }
  .mv-el-2{
    height: 1.4rem;
    width: 1.4rem;
  }
  .mv-el-1{
    width: 2.5rem;
  }
  .mv-text h1{
    font-size: 9vw;
  }
  .mv-text p{
    font-size: 3vw;
  }
  .mv-2{
    margin-left: 8%;
  }
  .mr-53{
    margin-right: 8%;
  }
}

.machinery-sep-sec{
  background-image: url(machinery-back2.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.blue-bg{
  background-color: rgba(0, 0, 0, 0.6);
}

.contact-section{
  background-image: url(contact-back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.contact-sep-sec-first-con{
  padding: 6rem 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}

.contact-first-sec-info{
  flex-basis: 43%;
  margin: 1rem 2rem 0 0;
}

.contact-first-sec-info h1{
  color: var(--dark-blue);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3vw;
}

.contact-first-sec-info p{
  color: var(--dark-black);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.1vw;
  margin-top: .70rem;
}

.contact-picture{
  margin-top: 1rem;
}

.contact-picture img{
  display: block;
  height: auto;
  width: 100%;
}

.contact-first-sec-form{
  margin-left: 2rem;
}

form{
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.form-input input{
  padding: 1rem 1rem;
  display: block;
  width: 27vw;
  margin-bottom: 1.2rem;
  border: none; 
  border-bottom: 1px solid white;
  outline: none;
  background-color: transparent;
  color: var(--dark-black);
  font-family: 'Poppins', sans-serif;
  transition: border-bottom 0.3s ease;
}

.form-input label{
  color: var(--dark-blue);
  font-family: 'Poppins', sans-serif;
  font-size: 1vw;
}

.form-input small{
  font-family: 'Poppins', sans-serif;
}

textarea{
  height: 8rem;
  padding: 1rem;
  width: 27vw;
  display: block;
  margin-bottom: 1.2rem;
  border: none; 
  border-bottom: 1px solid white;
  outline: none;
  background-color: transparent;
  color: var(--dark-black);
  font-family: 'Poppins', sans-serif;
  transition: border-bottom 0.3s ease;
}

.form-input{
  position: relative;
  margin: .2rem;
}

.form-input.success input{
  border-bottom: 2px solid var(--success-color);
}

.form-input.error input{
  border-bottom: 2px solid var(--error-color);
}

.form-input.success textarea{
  border-bottom: 2px solid var(--success-color);
}

.form-input.error textarea{
  border-bottom: 2px solid var(--error-color);
}

.form-input small {
  color: var(--error-color);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.form-input.error small {
  visibility: visible;
}

.form-input.error small{
  visibility: visible;
  color: #A52A2A;
  font-weight: 500;
}

.contact-us-btn{
  margin-top: 1rem;
  background: var(--dark-blue);
  border: none;
  padding: .75rem;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.1vw;
  cursor: pointer;
  width: 100%;
  border: 2px solid var(--dark-blue);
  transition: background-color 0.3s ease;
}

.contact-us-btn:hover {
  background: transparent;
  color: var(--dark-blue);
}

@media (min-width: 850px) and (max-width: 1000px){
  .contact-first-sec-form{
    margin-left: 0;
  }
  .form-input input{
    width: 31vw;
  }
  .form-input textarea{
    width: 31vw;
  }
  .form-input label{
    font-size: 1.2vw;
  }
  .contact-us-btn{
    font-size: 1.3vw;
  }
}

@media (min-width: 550px) and (max-width: 850px){
  .contact-sep-sec-first-con{
    flex-direction: column;
  }
  .contact-first-sec-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
  }
  .contact-first-sec-info h1{
    font-size: 6vw;
  }
  .contact-sep-sec-first-con p{
    font-size: 1.8vw;
  }
  .contact-first-sec-form{
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
  }
  .form-input input{
    width: 64vw;
  }
  .form-input textarea{
    width: 64vw;
  }
  .form-input label{
    font-size: 1.8vw;
  }
  .contact-us-btn{
    font-size: 2.3vw;
  }
}

@media (max-width: 550px){
  .contact-sep-sec-first-con{
    flex-direction: column;
    padding: 6rem 2rem;
  }
  .contact-first-sec-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
  }
  .contact-first-sec-info h1{
    font-size: 8vw;
  }
  .contact-sep-sec-first-con p{
    font-size: 2.5vw;
  }
  .contact-first-sec-form{
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
  }
  .form-input input{
    width: 65vw;
  }
  .form-input textarea{
    width: 65vw;
  }
  .form-input label{
    font-size: 2.5vw;
  }
  .contact-us-btn{
    font-size: 2.7vw;
  }
}

@media (max-width: 420px){
  .contact-first-sec-info h1{
    font-size: 10vw;
  }
  .contact-sep-sec-first-con p{
    font-size: 2.9vw;
  }
  .form-input label{
    font-size: 3.5vw;
  }
  .contact-us-btn{
    font-size: 3.3vw;
  }
}

.contact-sep-sec-second-con{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  padding: 0 2rem 5rem 2rem;
}

.contact-second-con-el{
  background: var(--dark-blue);
  flex-basis: 22%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.contact-second-con-el:nth-child(1){
  transition-delay: 200ms;
}

.contact-second-con-el:nth-child(2){
  transition-delay: 400ms;
}

.contact-second-con-el:nth-child(3){
  transition-delay: 600ms;
}

.contact-icon{
  color: var(--light-gray);
  font-size: 4vw;
}

.contact-second-con-el h2{
  color: var(--white);
  font-family: 'Playfair Display', 'sans-serif';
  font-weight: 500;
  font-size: 1.6vw;
  margin-top: 1rem;
}

.contact-second-con-el p{
  color: var(--bright-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.1vw;
  margin-top: .40rem;
}

@media (min-width: 650px) and (max-width: 850px){
  .contact-second-con-el h2{
    font-size: 1.9vw;
  }
  .contact-second-con-el p{
    font-size: 1.4vw;
  }
}

@media (min-width: 510px) and (max-width: 650px){
  .contact-second-con-el{
    padding: 1.6rem 1rem;
  }
  .contact-second-con-el h2{
    font-size: 2vw;
  }
  .contact-second-con-el p{
    font-size: 1.6vw;
  }
}

@media (max-width: 510px){
  .contact-sep-sec-second-con{
    padding: 0 4rem 5rem 4rem;
    flex-direction: column;
  }
  .contact-second-con-el{
    padding: 2rem;
  }
  .contact-icon{
    font-size: 8vw;
  }
  .contact-second-con-el h2{
    font-size: 3.8vw;
  }
  .contact-second-con-el p{
    font-size: 2.6vw;
  }
  .contact-second-con-el:nth-child(1){
    transition-delay: 0ms;
  }
  
  .contact-second-con-el:nth-child(2){
    transition-delay: 0ms;
  }
  
  .contact-second-con-el:nth-child(3){
    transition-delay: 0ms;
  }
}

.service-main-sec{
  background-image: url(gtp-service-back1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service2-main-sec{
  background-image: url(ss-service-back1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service3-main-sec{
  background-image: url(cc-service-back1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service-main-con{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 6rem 4rem;
}

.main-pic img{
  display: block;
  height: auto;
  width: 36vw;
  border-radius: .40rem;
}

.service-main-textbox{
  flex-basis: 45%;
  margin-left: 2rem;
}

.service-main-textbox h1{
  color: var(--dark-black);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 4vw;
}

.service-main-textbox p{
  color: var(--dark-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.2vw;
  margin-top: 1rem;
}

@media (min-width: 700px) and (max-width: 900px){
  .service-main-con{
    padding: 6rem 2rem;
  }
  .main-pic img{
    width: 39vw;
  }
  .service-main-textbox{
    flex-basis: 47%;
    margin-left: 1.3rem;
  }
  .service-main-textbox h1{
    font-size: 5vw;
  }
  .service-main-textbox p{
    font-size: 1.4vw;
    margin-top: .5rem;
  }
}

@media (min-width: 550px) and (max-width: 700px){
  .service-main-con{
    flex-direction: column;
  }
  .main-pic img{
    width: 54vw;
  }
  .service-main-textbox{
    margin-left: 0;
    text-align: center;
    margin-top: 1.5rem;
  }
  .service-main-textbox h1{
    font-size: 6vw;
  }
  .service-main-textbox p{
    font-size: 1.8vw;
    margin-top: .5rem;
  }
}

@media (min-width: 400px) and (max-width: 550px){
  .service-main-con{
    flex-direction: column;
    padding: 6rem 3rem;
  }
  .main-pic img{
    width: 59vw;
  }
  .service-main-textbox{
    margin-left: 0;
    text-align: center;
    margin-top: 1.5rem;
  }
  .service-main-textbox h1{
    font-size: 7vw;
  }
  .service-main-textbox p{
    font-size: 2.3vw;
    margin-top: .5rem;
  }
}

@media (max-width: 400px){
  .service-main-con{
    flex-direction: column;
    padding: 6rem 1.5rem;
  }
  .main-pic img{
    width: 65vw;
  }
  .service-main-textbox{
    margin-left: 0;
    text-align: center;
    margin-top: 1.5rem;
  }
  .service-main-textbox h1{
    font-size: 9vw;
  }
  .service-main-textbox p{
    font-size: 2.9vw;
    margin-top: .5rem;
  }
}

.service-section-two{
  background-image: url(gtp-service-back2.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service2-section-two{
  background-image: url(ss-service-back2.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service3-section-two{
  background-image: url(cc-service-back2.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.section-two-con{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8rem 10rem;
  text-align: center;
}

.section-two-con h1{
  color: var(--white);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3.5vw;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.section-two-con p{
  color: var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.2vw;
  margin-top: 1rem;
}

@media (min-width: 850px) and (max-width: 1100px){
  .section-two-con{
    padding: 8rem 6rem;
  }
  .section-two-con h1{
    font-size: 4.5vw;
  }
  .section-two-con p{
    font-size: 1.4vw;
  }
}

@media (min-width: 700px) and (max-width: 850px){
  .section-two-con{
    padding: 6rem 5rem;
  }
  .section-two-con h1{
    font-size: 5.5vw;
  }
  .section-two-con p{
    font-size: 1.7vw;
  }
}

@media (max-width: 700px){
  .service-section-two{
    display: none;
  }
  
  .service2-section-two{
    display: none;
  }
  
  .service3-section-two{
    display: none;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .section-two-con{
    padding: 5rem 3rem;
  }
  .section-two-con h1{
    font-size: 6vw;
  }
  .section-two-con p{
    font-size: 2vw;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .section-two-con{
    padding: 4rem 2rem;
  }
  .section-two-con h1{
    font-size: 7.2vw;
  }
  .section-two-con p{
    font-size: 2.5vw;
  }
}

@media (max-width: 400px){
  .section-two-con{
    padding: 3rem 1.5rem;
  }
  .section-two-con h1{
    font-size: 8vw;
  }
  .section-two-con p{
    font-size: 3vw;
  }
}

.service-section-three{
  background-image: url(gtp-service-back3.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service2-section-three{
  background-image: url(ss-service-back3.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service3-section-three{
  background-image: url(cc-service-back3.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.section-three-con{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem 4rem;
  gap: 4rem;
}

.sub-service{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.sub-service-pic img{
  display: block;
  height: auto;
  width: 30vw;
  border-radius: .40rem;
}

.sub-service-textbox{
  flex-basis: 45%;
}

.sub-service-textbox h1{
  color: var(--dark-black);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3vw;
}

.sub-service-textbox p{
  color: var(--dark-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.2vw;
  margin-top: 1rem;
}

.fd-r{
  flex-direction: row-reverse;
}

@media (min-width: 700px) and (max-width: 1000px){
  .sub-service-pic img{
    width: 33vw;
  }
  .sub-service-textbox h1{
    font-size: 4vw;
  }
  .sub-service-textbox p{
    font-size: 1.4vw;
  }
}

@media (min-width: 550px) and (max-width: 700px){
  .sub-service{
    flex-direction: column;
  }
  .sub-service-pic img{
    width: 40vw;
  }
  .sub-service-textbox{
    text-align: center;
  }
  .sub-service-textbox h1{
    font-size: 5vw;
  }
  .sub-service-textbox p{
    font-size: 1.8vw;
  }
}

@media (min-width: 400px) and (max-width: 550px){
  .section-three-con{
    padding: 6rem 2rem;
  }
  .sub-service{
    flex-direction: column;
  }
  .sub-service-pic img{
    width: 48vw;
  }
  .sub-service-textbox{
    text-align: center;
  }
  .sub-service-textbox h1{
    font-size: 6vw;
  }
  .sub-service-textbox p{
    font-size: 2.3vw;
  }
}

@media (max-width: 400px){
  .section-three-con{
    padding: 6rem 1.5rem;
  }
  .sub-service{
    flex-direction: column;
  }
  .sub-service-pic img{
    width: 58vw;
  }
  .sub-service-textbox{
    text-align: center;
  }
  .sub-service-textbox h1{
    font-size: 7vw;
  }
  .sub-service-textbox p{
    font-size: 3vw;
  }
}

.service-section-four{
  background-image: url(gtp-service-back4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service2-section-four{
  background-image: url(ss-service-back4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service3-section-four{
  background-image: url(cc-service-back4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.mr-t-b{
  margin-top: 1.5rem;
}

.section-four-con{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 10rem;
  text-align: center;
}

.section-four-con h1{
  color: var(--white);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3.5vw;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.section-four-con p{
  color: var(--light-gray);
  font-family: 'Poppins', 'sans-serif';
  font-size: 1.2vw;
  margin-top: 1rem;
}

.machinery-btn{
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-sep-btn button{
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  text-transform: uppercase;
  font-family: 'Poppins', 'sans-serif';
  font-weight: 600;
  padding: 1rem 2.2rem;
  cursor: pointer;
  font-size: 1.2vw;
  transition: 0.3s;
}

.service-sep-btn button:hover{
  background: var(--white);
  color: var(--navy-blue);
}

@media (min-width: 500px) and (max-width: 1024px){
  .service-sep-btn button{
    font-size: 1.4vw;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .service-sep-btn button{
    font-size: 1.6vw;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .service-sep-btn button{
    font-size: 2.1vw;
  }
}

@media (max-width: 400px){
  .service-sep-btn button{
    font-size: 2.7vw;
  }
}

@media (min-width: 850px) and (max-width: 1100px){
  .section-four-con{
    padding: 5rem 6rem;
  }
  .section-four-con h1{
    font-size: 4.5vw;
  }
  .section-four-con p{
    font-size: 1.4vw;
  }
}

@media (min-width: 700px) and (max-width: 850px){
  .section-four-con{
    padding: 4rem 5rem;
  }
  .section-four-con h1{
    font-size: 5.5vw;
  }
  .section-four-con p{
    font-size: 1.7vw;
  }
}

@media (min-width: 500px) and (max-width: 700px){
  .section-four-con{
    padding: 3rem 3rem;
  }
  .section-four-con h1{
    font-size: 6vw;
  }
  .section-four-con p{
    font-size: 2vw;
  }
}

@media (min-width: 400px) and (max-width: 500px){
  .section-four-con{
    padding: 2rem 2rem;
  }
  .section-four-con h1{
    font-size: 7.2vw;
  }
  .section-four-con p{
    font-size: 2.5vw;
  }
}

@media (max-width: 400px){
  .section-four-con{
    padding: 2rem 1.5rem;
  }
  .section-four-con h1{
    font-size: 8vw;
  }
  .section-four-con p{
    font-size: 3vw;
  }
}

.service-section-five{
  background-image: url(gtp-service-back5.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service2-section-five{
  background-image: url(ss-service-back5.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.service3-section-five{
  background-image: url(cc-service-back5.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.section-five-head h1{
  padding: 4rem;
  color: var(--dark-black);
  font-family: 'Playfair Display', 'sans-serif';
  font-size: 3vw;
}

.section-five-con{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4rem 5rem 4rem;
  gap: 5rem;
}

.other-service{
  cursor: pointer;
}

.other-service-pic img{
  display: block;
  height: auto;
  width: 29vw;
  border-radius: .50rem;
}

.other-service h1{
  font-family: 'Playfair Display', 'sans-serif';
  color: var(--dark-black);
  margin-top: 1rem;
  font-size: 1.8vw;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

@media (min-width: 600px) and (max-width: 800px){
  .section-five-head h1{
    font-size: 4vw;
  }
  .section-five-con{
    padding: 0 2rem 5rem 2rem;
    gap: 3rem;
  }
  .other-service-pic img{
    width: 38vw;
  }
  .other-service h1{
    font-size: 2.5vw;
  }
}

@media (min-width: 400px) and (max-width: 600px){
  .section-five-head h1{
    font-size: 5vw;
    padding: 4rem 2rem;
  }
  .section-five-con{
    padding: 0 2rem 5rem 2rem;
    gap: 3rem;
    flex-direction: column;
  }
  .other-service-pic img{
    width: 61vw;
  }
  .other-service h1{
    font-size: 3.5vw;
  }
}

@media (max-width: 400px){
  .section-five-head h1{
    font-size: 7vw;
    padding: 4rem 2rem;
  }
  .section-five-con{
    padding: 0 1rem 5rem 1rem;
    gap: 3rem;
    flex-direction: column;
  }
  .other-service-pic img{
    width: 72vw;
  }
  .other-service h1{
    font-size: 5.5vw;
  }
}

.project-sec{
  background-image: url(adailiya-project-back.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.container {
  position: relative;
  padding: 2rem 2rem;
}

.container .image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.project-column{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}

.container .image-container .media {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  overflow: hidden;
  cursor: pointer;
}

.large-pic{
  height: 29vw;
  width: 21vw;
  border-radius: .50rem;
}

.small-pic{
  height: 13.5vw;
  width: 21vw;
  border-radius: .50rem;
}

.container .image-container .media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .media:hover img{
  transform: scale(1.1);
}

.container .popup-media {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: none;
  opacity: 0;
  transform: scale(0.8); 
  transition: opacity 0.4s ease, transform 0.4s ease; 
}

.container .popup-media.active {
  display: block;
  opacity: 1;
  transform: scale(1); 
}

.container .popup-media span {
  position: absolute;
  top: 2%;
  right: 10px;
  font-size: 60px;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .popup-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  max-height: 95%;
  max-width: 85%;
  object-fit: cover;
}

@keyframes popupOpen {
  from {
      opacity: 0;
      transform: scale(0.8);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

.container .popup-media {
  animation: popupOpen 0.4s ease forwards;
  display: none;
  opacity: 0;
}

@media (min-width: 700px) and (max-width: 915px){
  .image-container{
    flex-direction: column;
  }
  .large-pic{
    height: 41vw;
    width: 42vw;
  }
  .small-pic{
    height: 41vw;
    width: 42vw;
  }
}

@media (min-width: 500px) and (max-width: 750px){
  .image-container{
    flex-direction: column;
  }
  .large-pic{
    height: 46vw;
    width: 65vw;
  }
  .small-pic{
    height: 46vw;
    width: 65vw;
  }
}

@media (max-width: 500px){
  .container{
    padding: 2rem 1rem;
  }
  .image-container{
    flex-direction: column;
  }
  .large-pic{
    height: 52vw;
    width: 75vw;
  }
  .small-pic{
    height: 52vw;
    width: 75vw;
  }
}

@media (max-width: 768px) {
  .container .popup-media img {
      width: 90%;
  }
}

.google-map{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 3rem;
}

.google-map iframe{
  width: 50vw;
  height: 38vw;
}

@media (max-width: 700px){
  .google-map iframe{
    width: 68vw;
    height: 49vw;
  }
}