body {
  font-family: Arial, sans-serif;
  direction: rtl;
  background-color: #f4f4f5;
}
/* ------------- */

.section1 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  animation: bgSlider 30s infinite ease-in-out;
}

/* الخلفيات اللي هتتغير */
@keyframes bgSlider {
  0%   { background-image: linear-gradient(to right,#00000062),url(/images/pict13.png); }
  33%  { background-image: linear-gradient(to right,#00000062),url(/images/pict2.png); }
  66%  { background-image: linear-gradient(to right,#00000062),url(/images/pict4.png); }
  100% { background-image: linear-gradient(to right,#00000062),url(/images/pict25.png); }
}



/* Navbar styling */
.navbar {
  position:sticky;
  top:0;
  z-index: 99999;
  
  background: #001607;
  padding: 10px 10px;
  color: #fff;
  display:flex ;
  align-items: center;
  justify-content: space-around;
  
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.logotext{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: bold;
  padding: 5px;
  
  
}

.logotextP1{
  font-size: 1.5rem;
  font-weight: bolder;
  text-align: center;
  color: white;
}

.logotextP2{
  font-size: 1rem;
  color: #d5fa01;

}

.navbar .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    align-items: center;
  justify-content: center;
  gap: 20px;
  }

  .menu-btn {
    display: none;
  }



.navbar .nav-links li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.active{
  border-bottom: #cf6c08 solid 3px;
  transition: all .3s;
  border-radius: 5px;
  
  
}
.active li a{
  color: #078d0e;
}



/* Menu button (hidden by default) */
.menu-btn {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
}

.contactWithUs{
  display: flex;
  align-items: center;
  gap: 15px;
  
}

.verticlaLine{
  width: 3.5px;
  height: 25px;
  border-radius: 2px;
  background-color: white;
}

.contacTextandPhone{
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contactText{
  color: #cf6c08;
}
/* Navbar End */

/* ------------------------------------ */

/* Hero Section start */

.herosection{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 0;
  color: white;
}
.herohead{
  font-size: 4rem;
  border-bottom: #22bb06 4px solid ;

}

.herodescription{
  font-size: 2rem;
  width: 49.5%;
  text-align: center;
  padding: 1.5rem;
  background-color:#35200c6b;
  border-radius: 1rem;
}
.herocontactus{
  background-color: #001607;
  
 
  padding: 5px 20px;
  border-radius: 3rem;
  font-size: 1.5rem;
  
}

.herocontactus a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
}
.herocontactus:hover{
  transform: scale(1.2);
  transition: all .4s;
  background-color: #001607a4;
  border-radius: 3rem;
  
}

/* the end of Hero section */

/* --------------------------------------------------- */

/* section two  Start*/

.section2Aboutus{
  background-color: #f1f1f1;
  display: flex;
  gap: 8rem;
  padding: 4rem 4rem;
  margin-bottom: 2rem;
}

.section2AboutusPart1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 90%;

}

.section2AboutusBtn{
  background-color: #021d03;
  width: 8em;
  text-align: center;
  padding: 15px 20px;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;  
}

.section2AboutusBtn a{
  color: white ;
  font-size: 1.5rem;
}

.section2Aboutusp1{
  color: #22bb06;
  font-size: 3.5rem;
  font-weight: 600;
  
}

.section2Aboutusp2{
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 3rem;
  color: #4a5361;
  border-bottom: 6px solid #f36c08;
  
}
.sugestions{
  height: 9rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem ;
  color: #147e18;
  padding:3rem ;
}
.sugestions1{
  border: #01581a62 solid .5px;
  padding: 5px;
  border-radius: .5rem;
  font-size: 1rem;
  font-weight: 700;

}



.section2AboutusPart1Img{
  background-image: url(/images/img1.png);
  width: 100%;
  height: 700px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 1px 20px 2px rgb(14, 13, 13);
  display: flex;
  align-self: center;
}
/* Section 2  End */

/* ------------------------------------------- */

/* Section 3 Start */
.section3{
  padding: 4rem 4rem;
}

 .section3ourProducts{
  background-color: #021d03;
  width: 8em;
  text-align: center;
  padding: 15px 20px;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;  
}
.section3ourProducts a{
  color: white ;
  font-size: 1.5rem;
}

/* Section 3 End */

/* ---------------------------------------------*/

/* Section 4 start*/

.section4{
  background-color: #fff;
  padding: 2rem 4rem ;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section4Part1{
  background-color: #021d03;
  width: 8em;
  text-align: center;
  padding: 15px 20px;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;  
}

.section4Part1 a{
  color: white ;
  font-size: 1.5rem;
} 

.section4part2{
  display: flex;
  align-items: center;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.section4part2Card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #f3f4f6;
  gap: 1.5rem;
  width: 350px;
  padding: 25px ;
  border-top:green solid 5px ;
  border-radius: 20px;
  box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.527);
}
.section4part2CardImg {
  background-image: url(/images/img2Razaz.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 width: 300px;
 height: 200px;
 border-radius: 20px;
}

.cuttrees{
  background-image: url(/images/img3_CutTrees.webp);
}

.glassesRooms{
  background-image: url(/images/img4_glassesRoom.png);
}

.PlantingBasins{
  background-image: url(/images/img6_PlantingBasins.png);
}

.NaturalTileIN{
  background-image: url(/images/img5_Natural_tile_installation.png);
}

.OutdoorSessions{
  background-image: url(/images/img7_OutdoorSessions.png);
}

.section4part2CardP1{
  color: #0b4b20;
  font-size: 2rem;
  font-weight:900 ;
}

.section4part2CardP2{
  font-size: 1.5rem;
  font-weight: 600;
  color: black;
  text-align: center;
}
.section4part2CardMoreInfo a{
  background-color:#021d03;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: 600;
}

.section4part2CardMoreInfo a:hover{
  transform: scale(1.2);
  background-color: #00160777;
  color: #001607;
  transition: all .4s;     
  border-radius: 43%;           
}



/* Section 4 End */
/* ------------------------------------------------ */
/* Section 5 start */
.section5{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 4rem;
}



.section5part2 {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section5part2 video {
  width: 100%;
  display: none;
  max-width: 400px; 
  height: auto;  
  border-radius: 10px;
}

.section5part2 video.active {
  display: block;
}




/* Section 5 End */
/* ------------------------------------------ */
/* Section 6 start */
.section6{
  padding: 2rem 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: white;
}
.section6Images img{
  width: 120px;
  height: 140px;
  border-radius: .5rem;
}

/* Section 6 End */
/* ---------------------------------------------- */
/* Section 7 start */

.section7{
  padding: 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section7part2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
}

.section7part2P1{
  font-size: 40px;
  font-weight: bold;
  color: #078d0e;
}
.section7part2P2{
  font-size: 25px;
  font-weight: lighter;
  color: #464545;
  width: 80%;
  text-align: center;
}

/* Section 7 End */
/* ------------------------------------------------------------ */
/* Section 8 start */






/* Section Phone and WhatsApp start */
.sectionPhone , .sectionWhatsApp{
  background-color: #01581ac9;
  width: 3rem;
  height: 3rem;
  padding: 15px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sectionPhone{
  position: fixed;
  bottom: 100px;
  right: 20px;
  box-shadow: 0 2px 20px 2px #252524c4;

}

.sectionWhatsApp{
  position: fixed;
  bottom: 100px;
  left: 20px;
  box-shadow: 0 2px 20px 2px #252524c4;
}
/* Section Phone and WhatsApp End */
/* -------------------------------------------------*/


/* TO TOP */
html {
      scroll-behavior: smooth;
    }

/* زر الرجوع */
    .to-top {
      position: fixed;
      bottom: 40px;
      right: 20px;
      z-index: 9999;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: 2px solid green;
      box-shadow: 0 2px 20px 2px #252524c4;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      /* مخفي في البداية */
      opacity: 0;
      transform: translateY(12px) scale(0.98);
      pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .to-top.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .to-top:focus {
      outline: 3px solid #ffd700;
      outline-offset: 2px;
    }




/* footer part start */
.foot{
background-color: white;
padding: 2rem 4rem;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}

.footerPart1AndPart2{
  display: flex;
  align-items: top;
  gap: 2rem;

}

.part1InFoot{
  
  width: 30vw;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.part1InFootLogo{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 60%;
  border-radius: 5px;
  box-shadow: 1px 0px 20px 2px rgba(130, 131, 130, 0.644);
  background-color: rgba(90, 46, 16, 0.527);
}
.part1InFootLogoTextP1{
  font-size: 1rem;
  font-weight: bold;
  color: #fcfdfc;
}

.part1InFootLogoTextP2{
  font-size: .5px;
  
  color: rgba(20, 82, 5, 0.774);

}


.part1InFoot p{
  font-size: 2rem;
  width:100%;
}

.part2InFoot{
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  
  
}
.part2InFoot ul{
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.part2InFoot ul li a{
  color: black;

}

.part2InFoot p{
  color: #cf6c08;
  padding:  10px 0;
  border-bottom: #cf6c08 solid 3px;
  border-radius: 4px;
  margin-bottom: 2rem;
}

.Pservices{
  width: 25%;
  text-align: center;
}
.PAboutUs{
  width: 70%;
  text-align: center;
}
.websitesLinkes{
  
  display: flex;
  flex-direction: column;
  gap: 20px;
  
}

.phone{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.5rem;
  background-color: #f3f4f6;
  padding: .5rem;
  border-radius: 10px;
}

.phoneIcon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #01581A;
}

.footHorizontalLine{
  height: 2px;
  width:100% ;
  background-color: #cf6c08;
}



/* footer part end */

/* Responsive */
@media (max-width: 768px) {
  
  .navbar{
    padding-left: 1rem;
    padding-right: 1remS;

    padding: 0 2remS;
  }


    /* الافتراضي للشاشات الصغيرة */
.navbar .nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: 70px; /* تحت النافبار */
  right: 10px;
  background: #001607;
  padding: 0 15px;
  border-radius: 8px;
  z-index: 9999;

  /* للأنيميشن */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
}

  .navbar .nav-links.show {
  max-height: 500px; /* رقم كافي لاحتواء اللستة */
  padding: 15px;
 }
  
  .menu-btn {
  display: block;
  font-size: 1.8em;
  cursor: pointer;
}

  .navbar .nav-links.show {
    left: 0;
  }

.herohead{
  font-size: 2.5rem;
  text-align: center;

}

  .contactWithUs{
    display: none;
}

.section2Aboutusp1{
  font-size: 2.5rem;
  text-align: center;
  color: #0b4b20;
}




.DeveByEM{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.herodescription{
  font-size: 1.5rem;
  width: 90%;
}
.section2Aboutus{
  flex-direction: column-reverse;
  padding: 2rem 2rem;
  margin-bottom: 0;
  gap: 1.5rem;
}

.section2AboutusPart1{
  width: 100%;

}
.section2Aboutusp2{
  font-size: 1.5rem;
  color: #00000091;
  text-align: center;
}
.section2AboutusPart1Img{
  height: 400px;
}
.section2AboutusPart1Img img:hover{
  transform: rotate(0deg);
}

.section2Aboutusp2{
  padding-bottom:3rem ;
}
.sugestions{
  width: 100%;
  height: auto;
  font-weight: 100;
  color: #0b4b20;
  padding: 0;
}

.section6{
  padding: 1rem 1rem;
 
}
.section7{
  padding: 1rem 2rem;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.section7part2{
  text-align: center;
  gap: 1rem;
}
.section7part2P1{
  font-size: 35px;
  font-weight: bold;
  color: #0b4b20;
}

.section7part2P2{
  font-size: 1.5rem;
  font-weight: bold;
  color: #0a0a0a94;
}
.part1InFootLogo{
  width: 60%;
  align-self: center;
  
}
.part1InFootLogoTextP1{
  color: white;
}
.foot{
  padding:  1rem 2rem;
  flex-direction: column;
  gap: 10px;
  padding: 1rem 0;


}
.footerPart1AndPart2{
  flex-direction: column;
  align-items: center;
}


.footerPart1AndPart2 p{
  text-align: center;
  
  
}

.part1InFoot{
  width: 70vw;
}

.part1InFoot p{
  font-size: 1.5rem;
  font-weight: bold;
}


.part2InFoot{
  font-size: 1.5rem;
  font-weight: bold;
}

.part2InFoot p{
  padding:  5px 0;
  border-bottom:  0px;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
}


}