* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, sans-serif;

}

body {

  background: #fff;

  color: #333;

}



/* Navbar */

.navbar {

  width: 100%;

  padding: 0px 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

}

.logo {

  font-size: 20px;

  font-weight: 550;

  color: #032042;

  display: flex;

  align-items: center;

}

.logo img {

  height: auto;

  width: 100px;

  margin-right: 8px;

}

.nav-right {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

}

.lang select {

  padding: 5px 10px;

  border-radius: 12px;

  font-size: 14px;

  border: 1.5px solid black;

  box-shadow: 2px solid black;

  cursor: pointer;

}

.user-menu i {

  font-size: 22px;

  cursor: pointer;

}



/* Hero */

.hero {

  width: 100%;

  min-height: 100vh;

  background: url('../images/sanitaryinstall.png') center/cover no-repeat; /* ✅ Path fixed */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}

.overlay {

  text-align: center;

  max-width: 800px;

  padding: 10px;

  background: rgba(255, 255, 255, 0.7);

  border-radius: 10px;

  position: absolute;

  top: 200px;

}

.overlay h1 {

  font-size: 30px;

  font-weight: bold;

  margin-bottom: 30px;

}



/* Search Box */

.search-box {

  display: flex;

  align-items: center;

  background: #fff;

  border-radius: 10px;

  padding: 10px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  margin-bottom: 20px;

}

.search-box i {

  color: #333;

  margin-right: 10px;

}

.search-box input {

  border: none;

  outline: none;

  flex: 1;

  font-size: 14px;

}

.btn-location {

  background: #e6f7ff;

  border: none;

  padding: 8px 12px;

  border-radius: 8px;

  cursor: pointer;

  font-size: 14px;

  color: #00bdf2;

}



/* Buttons */

.app-buttons {

  margin-top: 20px;

}

.login-btn {

  background: #ffd633;

  border: none;

  padding: 12px 20px;

  border-radius: 8px;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  margin-bottom: 15px;

}

.apps img {

  height: 45px;

  margin: 5px;

}



/* Popup */

.popup {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(15, 15, 15, 0.7);

  backdrop-filter: blur(8px);

  justify-content: center;

  align-items: center;

  z-index: 999;

}

.popup-content {

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(18px);

  border-radius: 25px;

  padding: 40px;

  width: 450px;

  max-width: 95%;

  box-shadow: 0 0 25px rgba(255, 214, 51, 0.4),

              0 0 40px rgba(255, 214, 51, 0.2);

  text-align: center;

  animation: floatUp 0.6s ease;

  border: 2px solid transparent;

  background-image: linear-gradient(

      rgba(255, 255, 255, 0.08), 

      rgba(255, 255, 255, 0.08)

    ), 

    linear-gradient(135deg, lightcoral, lightblue);

  background-origin: border-box;

  background-clip: padding-box, border-box;

}

.popup-content h2 {

  margin-bottom: 25px;

  font-size: 28px;

  font-weight: 700;

  color: #fff;

  letter-spacing: 1.5px;

}

.popup-content input {

  width: 100%;

  padding: 14px;

  margin-bottom: 10px;

  border-radius: 12px;

  border: none;

  outline: none;

  background: rgba(255, 255, 255, 0.9);

  font-size: 15px;

  transition: all 0.3s ease;

}

.popup-content input:focus {

  background: #fff;

  transform: scale(1.03);

}

.error {

  color: #ff4747;

  font-size: 13px;

  margin-bottom: 10px;

  text-align: left;

  font-weight: 600;

}

.popup-content button {

  width: 100%;

  padding: 14px;

  border-radius: 14px;

  border: none;

  cursor: pointer;

  font-size: 16px;

  font-weight: 700;

  margin-top: 8px;

  transition: all 0.3s ease;

}

.popup-content button:first-of-type {

  background: linear-gradient(135deg, lightcoral, lightblue);

  color: #222;

}

.popup-content button:first-of-type:hover {

  transform: translateY(-3px) scale(1.02);

}

.close-btn {

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  margin-top: 15px;

  font-weight: 600;

}

.close-btn:hover {

  background: rgba(255, 255, 255, 0.5);

  color: #000;

  transform: scale(1.05);

}

@keyframes floatUp {

  from { transform: translateY(40px) scale(0.9); opacity: 0; }

  to { transform: translateY(0) scale(1); opacity: 1; }

}







/* ----------------text----------- */



.text, .text2  { width:100%; padding:20px; }

.text h2, .text2 h2  { text-align:justify; margin-bottom:20px;  color: #021F3E;  padding: 0 60px; line-height:1.9; color: c; text-align:justify}

.text p, .text2 p  {

  padding: 0 60px; line-height:1.9; color: c; text-align:justify;

}

.text2 li{

    padding: 0 60px; line-height:1.9; color: c; text-align:justify

}

strong{

  color:rgb(116, 113, 113);  ;

}



/* -----------------service section--------------- */

/* black background */

 .services-section {

      background:#021F3E; 

      /* background: #000; */

      color: white;

      padding: 50px 20px;

    }



    .services-section h2 {

      font-size: 22px;

      font-weight: bold;

      margin-bottom: 20px;

    }



    .services-list {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      margin-bottom: 40px;

    }



    .services-list span a {

      /* background: #000; */

      color: white;

      padding: 8px 15px;

      border-radius: 20px;

      font-size: 14px;

      display: inline-block;

      transition: all 0.3s ease;

      cursor: pointer;

      list-style-type: none;

      text-decoration: none;

    }



    .services-list span:hover a {

      /* background: #333; */

      background: #F4C914;;

    }



    .countries {

      display: flex;

      flex-wrap: wrap;

      gap: 40px;

      margin-bottom: 30px;

    }



    .countries h3 {

      font-size: 16px;

      margin-bottom: 10px;

    }



    .countries .city-list span {

      /* background: #000; */

      padding: 6px 12px;

      border-radius: 20px;

      font-size: 13px;

      margin: 5px;

      display: inline-block;

      cursor: pointer;

      transition: all 0.3s ease;

    }

  .city-list span a{

 text-decoration: none;

 color: white;



  }

    .countries .city-list span:hover {

      /* background: #333; */

         background: #F4C914;;

    }



    .footer-bottom {

      display: flex;

      justify-content: space-between;

      align-items: center;

      flex-wrap: wrap;

      margin-top: 30px;

      font-size: 13px;

      color: #aaa;

    }



    .footer-bottom .social-icons i {

      font-size: 28px;

      margin-left: 15px;

      cursor: pointer;

      color: white;

      transition: color 0.3s;

    }



    .footer-bottom .social-icons i:hover {

      color: #F4C914;;

    }



    .container{

      color: #F4C914;

      font-weight: 800;

    }

       /* .container a{

      color:#F4C914; ;

    } */



    /* 📱 Responsive */

    @media (max-width: 768px) {

      .countries {

        flex-direction: column;

        gap: 20px;

      }

      .footer-bottom {

        flex-direction: column;

        gap: 15px;

        text-align: center;

      }

    }



/* Responsive */

@media(max-width:1024px){

  .overlay h1 { font-size: 28px; }

  .nav-right { gap: 10px; }

}

@media(max-width:768px){

  .navbar { padding: 10px 20px; }

  .logo img { width: 40px; }

  .overlay { top: 100px; padding: 15px; }

  .overlay h1 { font-size: 22px; margin-bottom: 20px; }

  .search-box { flex-direction: column; gap: 10px; }

  .btn-location { width: 100%; }

  .apps img { height: 38px; }

  .user-menu i { margin-left: 0; }

}

@media(max-width:480px){

  .logo { font-size: 14px; }

  .logo img { width: 30px; }

  .popup-content { padding: 25px; }

  .popup-content h2 { font-size: 22px; }

}