:root {
    --text-color:rgb(78, 78, 77);
}

body{
    background-color: #f7f7f7;
}

/* start header */


header.container .logo {
    width: auto;       /* حجم الصورة */
    height: auto;
    margin-top: 30px;
    margin-left: 50px;
}


ul {
    list-style: none
}


header nav ul li a.active {
    margin-left: 22%;
    position: relative;
    top: -62px;
    color: rgb(3, 3, 3);
      text-decoration: none;
      text-decoration: underline solid rgb(0, 0, 0);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

header nav ul li a.active:hover {
    color: orangered;
    text-decoration: underline solid orangered;
    text-decoration-thickness: 2px;
}

 /* end header */

 /* start landing */
.text {
    margin:50px;
    margin-top: 9%;
}

.text h1 {
    font-size: 60px;
    /* Bold Text */
    font-weight: bold;
}

.text p {
    margin-top:-30px;
    color: var(--text-color);
}
 /* end landing */

/* start img */
.img {
    display: flex;
    margin-left: 50%;
    margin-top: -30%;
}
/* end img */

/* start text 1 */
.text1{
    justify-content: center;
    text-align: center;
    margin-top: 100px;
}

.text1 h2 {
    font-weight:bold;
    font-size: 50px;
}

.text1 p {
    margin-top: -20px;
    line-height: 30px;
    color:  var(--text-color) ;
}
/* end text 1 */

/* start gallery  */
.gallery {
  display: flex;
  gap: 50px; 
  justify-content: center; 
  margin-top: 50px;
}
.box {
  text-align: center; 
}

.box img {
  width: 290px; 
  border-radius: 10px;
}

.box p {
    color: var(--text-color);
}

.box span {
    color: var(--text-color);
}

@media (max-width: 767px) {
  .gallery {
    flex-direction: column;
    align-items: center;
  }
}
/* end gallery  */

/* start text2 */
.text2 {
    display: flex;
    margin-top: 10%;
    gap: 50px;  /* مسافة بين الصورة والكلام */
    padding: 20px;
}

.text2 .image1 img {
    width: 600px;
  max-width: 100%;
}

.hero-text {
  max-width: 500px;
  margin-top: 110px;
  margin-left: 10%;
  color: rgb(44, 44, 44);
}

.hero-text h2 {
    font-size: 50px;
    font-weight: bold;
}

.hero-text p {
    font-size: 17px;
    color: var(--text-color);
    font-weight: bold;
}

/* end text2 */
/* start service */
.service {
    display: flex;
    gap: 13%;
    margin-top: 50px;
}

.service .serv {
    margin-left: 20px;
    font-weight: bold;
}

.service .serv1 {
    background-color: #f3f1f1; /* لون الخلفية الرمادي */
    padding: 10px 45px;       /* مساحة صغيرة جوه البلوك */
    width: fit-content;       /* يخلي الخلفية على قد الكلام بالظبط */
    border-radius: 10px;      /* الحواف الناعمة */
    display: flex;
    align-items: center;
    font-weight: bold;
    gap: 9px;
    width: fit-content;
}

.service .serv1 span {
    color: #f29f05;
}

/* end service */

/* start text3 */
.text3 {
    margin-top: 15%;
    margin-left: 2%;
}

.text3 h1 {
    font-size: 50px;
    font-weight:bold;
}

.text3 p {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
}

.image2 {
    margin-left: 50% ;
    margin-top: -25%;
}
/* end text3 */

/* start text-image */
    .text-image {
        margin-top: 10% ;
        margin-left:3% ;
    }

    .text-image .te-im h1 {
        font-size: 50px;
        font-weight: bold;
        color: rgb(44, 44, 44);
    }

    .text-image .te-im p {
    color: var(--text-color);
    margin-top: -1%;
    font-weight: bold;
    font-size: 17px;
    }


    .text-image .te-im h2 {
    font-size: 40px;
    color: rgb(44, 44, 44);
    font-weight: bold;
    }

/* النص التاني */



.text-image .xt-image {
    margin-left: 45%;
    display: flex; /* يجعل الصورة والنص بجانب بعضهما */
    align-items: center; /* محاذاة عمودية في المنتصف */
    gap: 20px; /* مسافة بين الصورة والنص */
    padding: 10px;
    border-radius: 50%;
    
    background: linear-gradient(to right, #fff5f2, #ffffff); /* خلفية متدرجة بسيطة */
}

.text-image .xt-image .hero-content {
    display: flex;
    flex-direction: column; /* يجعل العنوان والوصف تحت بعضهما */
}

.text-image .ssss {
    margin-top:-45% ;
}

.imag3 {
    border-radius:30px;

}

.hero-content h1 {
    font-size: 30px;
    font-weight: bold;
    color: #333;
}

.hero-content p {
    font-size: 20px;
    font-weight: bold;
    color:var(--text-color);
}

/* end text-image */

/* start text5 */
.text5 {
    display: flex;
    margin-left: 10px;
    margin-top:10%;
}

.text5 h1 {
    margin-left:160px;
    margin-top: 10%;
    font-size: 50px ;
    font-weight: bold;
    color:rgb(44, 44, 44); 
}



/* end text5 */
.back .container1 {
display: flex;         /* ده بيخلي اللوجو والنافيجيشن جمب بعض أوتوماتيك */
    align-items: center;   /* بيخليهم على نفس الخط أفقيًا */
    justify-content: space-between; /* بيرمي اللوجو شمال والمنيو يمين */
    padding: 20px; 
    width:400px ;  
    
}


.container1 .logo2 {
margin-left: 20px;
margin-top: 5%;
    width: 200px;  /* حجم الصورة */
    height: auto;
}



.back .container1 nav ul li a.home {
    margin-left: 500%;
    margin-top: 9%;
    color: white;
}
.back .container1 nav ul li a.home:hover {
    list-style: none;
    color:orangered;
}





.contacts h1 {
    color: #f7f7f7;
    font-size: 50px;
    font-weight: bold;
    padding-left: 20px;
}

.contacts p {
    color: #f7f7f7;
    font-size: 20px;
    font-weight: bold;
    padding-left: 20px;
} 

.contacts .pppp {
    margin-top: 5px;
    padding: 10px;
}

.contacts .phone {
    margin-left: 60%;
    padding-top: -10%;
}

.contacts .phone h1 {
    font-size: 20px;
    font-weight: bold;
}

.back{
    background-color: #363636;
}


/* @media */
    
    @media (max-width: 767px) {

  /* header */
  header.container .logo {
    margin: 20px auto;
    display: block;
    text-align: center;
  }

  header nav ul li a.active {
    margin-left: -40px;
    top: 0;
    display: block;
    text-align: center;
  }


  .img img {
    justify-content: center;
    width: 400px;
  }

  /* landing */
  .text {
    margin: 20px;
    text-align: center;
  }

  .text h1 {
    font-size: 35px;
  }

  .text p {
    margin-top: 10px;
  }

  /* image landing */
  .img {
    margin: 20px auto;
    justify-content: center;
  }

  /* text1 */
  .text1 h2 {
    font-size: 32px;
  }

  .text1 p {
    padding: 0 15px;
  }

  /* gallery */
  .gallery {
    flex-direction: column;
    gap: 30px;
  }

  /* text2 */
  .text2 {
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    margin: 20px auto;
  }

  .hero-text h2 {
    font-size: 32px;
  }

  /* service */
  .service {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  /* text3 */
  .text3 {
    margin: 40px 20px;
    text-align: center;
  }

  .text3 h1 {
    font-size: 35px;
  }

  .image2 {
    margin: 20px auto;
    text-align: center;
  }

  /* text-image */
  .text-image {
    margin: 40px 20px;
    text-align: center;
  }

  .text-image .xt-image {
    margin-left: 0;
    flex-direction: column;
    text-align: center;
  }

  .text-image .ssss {
    margin-top: 0;
  }

  /* text5 */
  .text5 {
    flex-direction: column;
    text-align: center;
  }
 

   
  .text5 h1 {
    margin: 20px 0;
    font-size: 35px;
  }

  /* footer / back */
  .back .container1 {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .back .container1 nav ul li a.home {
    margin-left: -70%;
  }

  .container1 .logo2 {
    margin-right: 20%;
  }
 
  .contacts {
    text-align: center;
  }

  .contacts .phone {
    margin-left: 0;
  }
 
 .image2 img {
    justify-content: center;
    text-align: center;
    width: 300px;
    
 }
}

    
/* end @media */