* {

  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/sofaimg2.jpeg') 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: 90px;

}

.overlay h1 {

  font-size: 25px;

  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; }

}



/* Services */

.services {

  max-width: 1100px;

  margin: 50px auto;

  padding: 0 20px;

}

.services h2 {

  font-size: 28px;

  margin-bottom: 10px;

  text-align: center;

}

.services p {

  font-size: 16px;

  margin-bottom: 40px;

  text-align: center;

}

.services-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 20px;

}

.service-card {

  background: #fafafa;

  border: 1px solid #eee;

  border-radius: 10px;

  padding: 25px 15px;

  text-align: center;

  transition: 0.3s;

}

.service-card:hover {

  background: #f0f9ff;

  transform: translateY(-5px);

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);

}

.service-card img {

  width: 60px;

  height: 60px;

  margin-bottom: 15px;

}

.service-card h3 {

  font-size: 15px;

  font-weight: 600;

}



/* ---------------card------------- */





    /* Parent section */

    .reasons-section {

      text-align: center;

      padding: 60px 20px;

      background: #f9f9f9;

    }



    .reasons-section h2 {

      font-size: 28px;

      font-weight: bold;

      margin-bottom: 10px;

    }



    .reasons-section p.sub-title {

      font-size: 16px;

      color: #666;

      margin-bottom: 40px;

    }



    /* Cards container */

    .card-container {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

      gap: 20px;

      max-width: 1200px;

      margin: auto;

    }



    /* Card styles */

    .card {

      background: #fff;

      padding: 30px 20px;

      border-radius: 15px;

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

      transition: transform 0.3s ease, box-shadow 0.3s ease;

    }



    .card:hover {

      transform: translateY(-5px);

      box-shadow: 0 6px 20px rgba(0,0,0,0.15);

    }



    .card img {

      width: 60px;

      margin-bottom: 20px;

    }



    .card h3 {

      font-size: 18px;

      font-weight: bold;

      margin-bottom: 10px;

    }



    .card p {

      font-size: 14px;

      color: #555;

      line-height: 1.5;

    }



    /* -------------testimonial section-------------- */



.testimonial-section {

      text-align: center;

      padding: 60px 20px;

      background: #f7f7f7;

    }



    .testimonial-section h2 {

      font-size: 26px;

      font-weight: bold;

      margin-bottom: 10px;

    }



    .testimonial-section p.sub-title {

      font-size: 15px;

      color: #666;

      margin-bottom: 30px;

    }



    .stars {

      display: inline-block;

      margin-bottom: 20px;

      background: #fff;

      padding: 8px 16px;

      border-radius: 25px;

      box-shadow: 0 2px 6px rgba(0,0,0,0.1);

    }



    .stars img {

      width: 22px;

      margin: 0 2px;

    }



    .review-box {

      max-width: 800px;

      margin: auto;

      background: #fff;

      padding: 30px;

      border-radius: 15px;

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

    }



    .review-box p {

      font-size: 18px;

      color: #444;

      line-height: 1.6;

    }



    .review-box p span {

      color: red;

      font-size: 20px;

    }



    .customer-name {

      margin-top: 20px;

      font-weight: bold;

      font-size: 18px;

      color: #0099ff;

    }



/* -------------blue section---------- */

  .blue-section {

  background-color: #F4C914; /* blue background */

  color: white;

  padding: 50px 20px;

  text-align: justify;

  position: relative;

}



.blue-section .icon {

  font-size: 60px;

  margin-bottom: 20px;

  position: absolute;

  left: 20%;

  top: 40px;

}



.blue-section h2 {

  font-size: 28px;

  font-weight: bold;

  margin-bottom: 15px;

  margin-left: 26%;

}



.blue-section p {

  font-size: 16px;

  line-height: 1.6;

  max-width: 700px;

  margin-left: 26%;

}











/* -----------------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 Design */

@media (max-width: 768px) {

  .blue-section {

    text-align: center;

    padding: 40px 20px;

  }



  .blue-section .icon {

    position: static;   /* absolute hata ke upar le aayenge */

    margin: 0 auto 15px auto;

    display: block;

  }



  .blue-section h2,

  .blue-section p {

    margin-left: 0; /* center align */

  }



  .blue-section h2 {

    font-size: 24px;

  }



  .blue-section p {

    font-size: 14px;

  }

}



/* 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; }

}