/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
   -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
  -moz-tap-highlight-color: transparent;
}
body {
  font-family: "Times New Roman", Times, serif;
  color: #000000;
  background: white;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Top Banner */
.top-banner {
  padding: 10px;
  text-align: center;
  display: flex;

  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(235, 235, 5, 0.92);
  position: relative;
  height: 15vh;
}
.banner-text {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
}
.banner-text span {
  font-size: 1rem;
  margin-left: 20px;
}
.banner-contact {
  display: flex;
  flex-direction: column;
}
.banner-contact a {
  text-decoration: none;
}
.banner-contact a {
  font-size: 1.5rem;
}
.banner-contact .call-us-txt {
  color: #000000; /* text color */
  /* background */
  margin-left: 2rem;
  border-radius: 20px;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Style the phone number link */
.banner-contact .number {
  color: rgb(0, 0, 0); /* text color */
  background: none; /* no background */
  font-weight: bold;
  text-decoration: none;
  font-size: 1.4rem;
}
.enquire-btn {
  text-decoration: none;
  background: linear-gradient(90deg, #027f9d, #ffd700);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1.3rem;
  position: absolute;
  right: 2vw;
  top: 3vh;
  display: flex;
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  white-space: nowrap;
}
.enquire-btn:hover {
  background: linear-gradient(90deg, #00b7c2, #ffa500);
  color: white;
  transition: all 0.3s ease-in-out;
  box-shadow: black 0px 6px 8px -1px, black 0px 4px 6px -1px;
}
.enquire-btn:active {
  transform: scale(0.95);
  box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
}
.dropdown {
  position: relative;
}
.menu .dropdown span {
  font-size: 1.4rem;
  position: absolute;
  bottom: -1.5vh;
  right: -1vw;
}
.number {
  color: yellow;
  font-size: 1.3rem;
}

/* Navbar */
.navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background: #374151;
  padding: 15px 20px;
  position: sticky;
  height: 22vh;
  flex-wrap: wrap;
  top: 0;
  box-shadow: 0 4px 7px #ffffff;
  z-index: 100;
}
.enquire-btn1 {
  display: none;
}
.navbar .logo {
  height: 27vh;
  width: 20vw;
  position: absolute;
  left: 1vh;
  cursor: pointer;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.navbar .menu {
  list-style: none;
  display: flex;
  justify-content: center;
  /* flex-wrap: wrap; */
  margin-bottom: 3vh;
  gap: 20px;
  align-items: center;
  transition: max-height 0.3s;
}
.menu {
  margin-left: 10vw;
}
.navbar .menu a {
  text-decoration: none;
  color: #0b0b0b;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 4px;
  flex-wrap: wrap;
  transition: color 0.2s, background 0.2s;
}
.navbar .menu li a:hover,
.navbar .menu li.active > a {
  color: #027f9d;
  background: #f0f8fa;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}
.dropdown-menu {
  display: none;
  position: absolute;

  text-wrap: none;
  top: 100%;
  right: 0;
  width: 27vw;

  background: rgba(255, 255, 255, 0.7);
  padding: 10px 0;
  box-shadow: 0 2px 5px rgb(105, 89, 89);
  z-index: 9999; /* Make sure it's above navbar */
  overflow-y: auto;
  scroll-behavior: smooth;
  max-height: 300px; /* enables vertical scroll */
  scrollbar-width: thin;
}
.menu {
  width: 80vw;
  position: absolute;
  right: 0;
  top: 9vh;
}

.navbar .menu > li:hover > .dropdown-menu,
.navbar .menu > li:focus-within > .dropdown-menu {
  display: block;
}
.dropdown-menu li {
  padding: 5px 20px;
}
.dropdown-menu li a {
  color: #374151;
  font-weight: 500;
  text-align: left; /* Align text to the right */
  display: block; /* ensures the text-align applies */
  padding-right: 24px; /* match the dropdown-menu padding */
}
.dropdown-menu li a:hover {
  color: #027f9d;
  background: #eafafc;
}
.menu li a {
  color: #f0e91c;
  transition: all 0.1s ease-in-out;
}
.menu li a:hover span {
  color: #027f9d;
}
.dropdown {
  margin-right: 2vw;

  position: relative;
}
.dropdown span {
  position: absolute;
}
.menu .dropdown span {
  font-size: 1.7rem;
}
/* Ensure parent li is relative for dropdown positioning */
.navbar .menu > li {
  position: relative;
}

/* Hamburger for mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
  margin-right: 2vw;
  z-index: 200;
}
.menu-toggle span {
  height: 3px;
  width: 28px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.3s;
}

/* Hero Section */
.hero {
  background: url("hero-bg.jpg") center/cover no-repeat;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-content h1 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 15px;
}
.hero-btn {
  padding: 10px 25px;
  background: #00b7c2;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* Features */
.features {
  display: flex;
  justify-content: space-around;
  padding: 40px 20px;
  
  height: 40vh;
  width: 100%;
}
.feature-box {
  background: #f7f7f7;
  padding: 20px;
  width: 30%;
  height: 40vh;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
  min-width: 220px;
  box-shadow: black 0px 1px 2px -1px;
}

/* Services */
.services-list {
  padding: 40px 20px;
  display: flex;
 flex-direction: row;
  align-items: center;
  gap: 15px;
  width: 100%;
  overflow-x: hidden;
  height: 100vh;
  background-image: url(image/clean-bg.jpg);
  
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

.services-list h2 {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 5vh;
  
  gap: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.services-list .service-item{
  display: flex;
flex-wrap: wrap;
justify-content: center;
cursor: pointer;
height: 60vh;
padding: 40px;
 transform-style: preserve-3d;
  transition: transform 0.6s ease;
  background-color: rgba(253, 253, 253, 0.813);
}
.services-list .service-item:hover{
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  transform: scale(1.05);
  background-color: #09eaf6;
  transition: all 0.5s ease-in-out;
  transform: rotateY(360deg);
}
.services-list .service-item:active{
  transform: scale(0.85);
  box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
}
.service-item h3,p,a{
  color: rgb(0, 0, 0);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-decoration: none;
}

.service-icon{
  width: 10vw;
  height: 20vh;
  margin-bottom: 10px;
}
.main-heading{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28vh;
  position: relative;
}
.line{
  border-bottom: #000 1px solid;
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5vh auto;
}
.main-heading h2{
  color: rgb(53, 204, 204);
}
.main-heading span{
  color: #027f9d;
}
.service-item {
  
 background: #f7f7f7;
  padding: 20px;
  width: 30%;
  height: 40vh;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
  min-width: 220px;
  box-shadow: black 0px 2px 4px -1px;
}
.service-item h3 {
  margin-bottom: 10px;
}
.service-item a {
  color: #027f9d;
}
.slideshow {
  position: relative;
  width: 100%;
  min-height: 100vh; /* full viewport height */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full viewport height */
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  background-color: #fde90c; /* blue box */
  color: white;
  padding: 2rem;
  text-align: center;
  z-index: 1;
  border-radius: 5px;
  width: 40vw;
}

.overlay h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: rgb(0, 0, 0);
}
.overlay {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;

  opacity: 0; /* start hidden */
  pointer-events: none; /* prevent blocking clicks/hover */
  transition: opacity 0.5s ease; /* smooth fade */
}

.overlay h1,
.overlay p {
  display: inline-block;
  /* typing cursor */

  overflow: hidden;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.overlay p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.pop-up-enquire-btn {
  background-color: rgb(255, 255, 255);
  color: #000;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pop-up-enquire-btn:hover {
  background-color: #00f2ff;
  color: #fff;
  transition: all 0.3s;
  transform: scale(0.95);
}

/* .overlay button {
  background-color: #fde90c;
  color: #000;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
} */

/* === FIX FOR OVERLAY BUTTONS === */

/* Remove generic, conflicting hover rule */
/* You can delete the old .overlay button:hover rule */

/* Base styles for Commercial and Domestic buttons */
/* .commercial-btn,
 .domestic-btn {
  background-color: #fff;
  color: #000 !important;
  padding: 15px 30px;
  border: 2px solid #000;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}


 .commercial-btn:hover,
.domestic-btn:hover {
  background-color: #0ff0ec !important; 
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   transform: scale(0.95);
}


.overlay .buttons .commercial-btn:active,
.overlay .buttons .domestic-btn:active {
  transform: scale(0.95);
} */

/* .overlay button:hover {
  background-color: #0ff0ec;     
  color: #000000;             
  transform: scale(1.1);      
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
} */

/* .overlay .buttons button:first-child {
  background-color: #fe0000;
  transition: all 0.3s ease;
  color: rgb(0, 0, 0)
  
} */

/* .overlay .buttons button:last-child {
  background-color: #e8e8e8;
  color: rgb(0, 0, 0);
} */

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* background-position: center;
  background-repeat: no-repeat;
   */

  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1s ease, transform 6s ease;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
}
.sale,.service,.experts {
  width: 10vw;
  height: 20vh;
  margin-bottom: 10px;
}
/* About us  */
.about-us{
  background-color: #fbfdff;;
  height: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  display:flex;
  box-shadow: black 0px 1px 4px 1px;
  padding: 10px;
  margin-bottom: 5vh;
  
}
.policy{
  margin: 2vw;
  
}
.mid-image{
  height: 100vh;
  width: 30vw;
 margin-right: 6vw;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
}
.about-us-text{
margin: 2vw;

}
.about-us-text h2{
  color: #000000;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.about-us p{
  color: #000000;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-bottom: 10px;
   width: 300px; 
     /* container width */
  border: 0px solid #000;

  
}

.about-us button{
  border-radius: 20px;
  height: 7vh;
  width: 8vw;
  border: none;
  margin-top: 2vh;
  background-color: #00b7c2;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.about-us button:hover{
  background-color: #09eaf6;
  color: white;
  transform: scale(1.05);
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
}
.about-us button:active{
  transform: scale(0.98);
  box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
}
.about-us .aboutUs-text{
  color: #000000;
  font-size: 1.5rem;
}
.about-us-text h1{
  color: #06aff8;
  text-decoration: none;
  font-size: 1.7rem;
  padding-top: 5px;
}
.about-us-icon{
  height: 10vh;
  padding-top: 5px;
}
.policy h2{
  color: #000000;
  font-size: 1.5rem;
  padding-bottom: 10px;
}
.policy p{
  color: rgb(0, 0, 0);
}

/* end-section */
.end-section{
   display: flex;
   flex-direction: column;
  justify-content: space-evenly;
  padding: 40px 20px;
  background-image: url(image/professional-cleaning-service-people-working-together-office.jpg);
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
  height: 75vh;
  width: 100%;
}
.end-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* dark overlay with opacity */
}
.testimonal-container{
  display: flex;
  gap: 15px;
 justify-content: space-evenly;
  align-items: center;
  z-index: 1;
  
}
.testimonal-box{
  background: #f7f7f7;
  padding: 20px;
  width: 30%;
  height: 50vh;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
  min-width: 220px;
  box-shadow: black 0px 1px 2px -1px;
  overflow-y: auto;
 overflow-x: hidden;
 position: relative;
 display: flex;
  justify-content: center;
  align-items: center;
 flex-direction: row;
}
.testimonal-box h3{
  margin-top: 2vh;
}
.testimonal-box span{
  position: absolute;
  bottom: 2vh;
  right: 37%;
  color: rgb(46, 121, 207);
  font-size: 1.5rem;
}
.read-me-more button {
 border-radius: 20px;
  height: 8vh;
  width: 9vw;
  border: none;

  background-color: #00b7c2;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
}
.read-me-more-btn{
  display: flex;
     /* prevent text from wrapping */
  width: 15vw;

  overflow: hidden;        /* optional: hide overflow if needed */
 text-align: center;
 align-items: center;
 justify-content: center;
 margin: auto;
 border-radius: 10px;
 height: 50vh;
 background-color: #10afb4;
 z-index: 2;
 border: none;
 box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
 transition: transform 0.3s ease;
 cursor: pointer;
}
.read-me-more-btn:hover{
    background-color: #17d3dd;
  color: white;
  transform: scale(1.05);
 box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
}
.read-me-more-btn:active{
  transform: scale(0.98);
   box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
}
.read-me-more button:hover{
  background-color: #17d3dd;
  color: white;
  transform: scale(1.05);
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  
} 
.read-me-more button:active{
  transform: scale(0.98);
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
}
.read-me-more{
  margin: auto;
  z-index: 2;
 
}
.review-header{
  text-align: center;
  margin-bottom: 20px;
  margin-top: 5vh;
  
  gap: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.review-header span{
  color: #09eaf6;

}
.review-header p{
  border: 1px black solid;
  margin-top: 2vh;
  width: 40%;
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
  margin: 2vh auto;

}
/* Updates */
.Updates{
  display: flex;
 
  gap: 20px;
justify-content: space-evenly;
  background: #f9fafa;
  height:auto;
  width: 100%;
  padding: 40px 0px;
  overflow-x: auto;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
.updates-box{
    background: #f7f7f7;
  padding: 0px;
  width: 27%;
  height: auto;
  /* flex-wrap: wrap; */
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
  min-width: 220px;
  /* justify-content: center; */
  box-shadow: black 0px 1px 2px -1px;

 position: relative;
 display: flex;
  flex: 0 0 auto;         /* do not shrink */
  width: 300px;
  
 text-align: start;
 
 flex-direction: column;

}
.image-container{
  height: 60%;
  width: 100%;
  
  background-position: center;
  object-fit: cover;
}
.updates-img{
  height: 40vh;
  width: 100%;
 
  background-position: center;
  object-fit: cover;
}
.box-content{
  padding: 8px;
  font-family: 'Times New Roman', Times, serif;
}

.box-content span{
  display: flex;
  justify-content: center;
  align-items: center;
 background-color: yellow;
 padding: 10px;
 

 width: auto;
 box-shadow: black 0px 1px 2px -1px;

  
  /* justify-content: flex-start; */
  /* text-align: left; */ 
  /* flex: 1; */
  
 
}
.update-heading{
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 15vh;
  padding: 10px;
  border-bottom: 1px black solid;
  width: 30vw;
  margin: 15vh auto 0;
  
}
.box-content h2{
  padding: 10px;
}
.read-me-more {
 border-radius: 20px;
  height: 8vh;
  width: 9vw;
  border: none;
margin-bottom: 2vh;
  background-color: #00b7c2;
  transition: all 0.3s ease-in-out;
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  cursor: pointer;
}
.read-me-more:hover{
  background-color: #17d3dd;
  color: white;
  transform: scale(1.05);
  box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  
} 
.read-me-more:active{
  transform: scale(0.98);
  box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
}

/* FAQ and Quote */
.faq {
  max-width: 400px;
  margin: 50px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
  


}

.faq-box, .quote-field {
  flex: 1;              /* both take equal width */
  max-width: 100%;   
  text-align: center;    /* prevent them from overflowing */
}
.faq-quote{

  background-color: rgb(58, 76, 85);
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* keeps them aligned at the top */
  gap: 40px; /* spacing between FAQ and Quote form */
  padding: 40px;
  
  flex-wrap: wrap;


}
.quote-form {
  display: flex;
  flex-direction: column;
  align-items: center;  /* centers inputs and button */
}
.quote-field h2{
  color: black !important;
}
.faq-quote h2 {
 color: rgb(247, 247, 247);
  margin-bottom: 30px;
  margin-top: 4vh;
  margin-left: 2vw;
}

.faq-item {
  
  margin-bottom: 10px;
}
.quote-field{
  /* background-color: rgb(249, 249, 249); */
  border-radius: 10px;
}
.faq-question {
  width: 80%;
  text-align: left;
  padding: 15px;
  background: #38464ff7;
  border: none;
  outline: none;
  margin-left: 2vw;
 display: flex;
 justify-content: space-between;
  cursor: pointer;
  font-size: 18px;
  color: rgb(255, 255, 255);
  transition: background 0.3s;
  box-shadow: white 2px 1px 6px 1px;
}
.faq-question i{
  color: white;
}

.faq-question:hover {
  background: #00eeffd4;
  color: black;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 25px;
  color: white;
  text-align: left;
}

.faq-answer p {
  margin: 15px 0;
  color: white;
}

/* Form Field */
.quote-form input,
.quote-form select {
  width: 60%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #fff;
  border-radius: 25px;
  background: #feffff; /* same blue */
  color: #000000;
  font-size: 16px;
}

.send-btn {
  width: 60%;
  padding: 14px;
  margin-top: 15px;
  border: none;
  border-radius: 25px;
  background: #0dc2f4; /* yellow to stand out */
  color: #000;
  margin-bottom: 2vh;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.send-btn:hover {
  transform: scale(1.1);/* darker yellow on hover */
}
.send-btn:active{
  transform: scale(0.98);
}

.view-all{
    width: 40%;
  padding: 14px;
  margin-top: 15px;
  border: none;
  border-radius: 25px;
  background: #0dc2f4; /* yellow to stand out */
  color: #000;
  margin-bottom: 2vh;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
 margin-left: 2vw;
 margin-top: 10vh;
 transition: all 0.1s ease-in-out;
}
.view-all:hover{
  transform: scale(1.1);
}
.view-all:active{
  transform: scale(0.98);
}

/* End-Text */
.end-text{
  display: flex;
  justify-content: center;
 
  flex-direction: column;
  text-align: center;
}
.para1-heading{
font-size: 2.5rem;
background: linear-gradient(90deg, #001f5c, #1e90ff); /* deep blue → light blue */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}
.para1{
    text-align: left;     /* even alignment left & right */
  line-height: 1.6;        /* good readability */
  word-wrap: break-word;   /* break long words if needed */
  white-space: normal; 
  padding: 0px 50px;
}
.para2-heading{
font-size: 2.5rem;
background: linear-gradient(90deg, #001f5c, #1e90ff); /* deep blue → light blue */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}
.para2{
    text-align: left;     /* even alignment left & right */
  line-height: 1.6;        /* good readability */
  word-wrap: break-word;   /* break long words if needed */
  white-space: normal; 
  padding: 0px 50px;
}
.cleaning-points {
  list-style: none;       /* remove browser bullets */
  margin: 20px 40px;         /* space above/below */
  padding: 0;             /* remove left padding */
  text-align: left!important;       /* force left alignment */
  max-width: 900px;       /* optional: keeps text width nice */
}

.cleaning-points li {
  position: relative;
  padding-left: 32px;     /* space for icon */
  margin: 10px 0;         /* spacing between items */
  line-height: 1.6;
}
.cleaning-points p{
  text-align: left;
}

/* add custom checkmark instead of bullet */
.cleaning-points li::before {
  content: "✔";           /* checkmark */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  font-weight: bold;
  color: #0077cc;         /* deep blue */
}
.update-heading span {
  color: rgb(0, 119, 255);
   padding-left: 5px;
}
/* Why Us */
.why-us {
  padding: 40px 20px;
  background: #e0ef07;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
}
.why-us h3 {
  color: #027f9d;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: "Times New Roman", Times, serif;
}

.footer {
  background: #374151;
  color: #eee;
  padding: 60px 20px 20px;
  font-family: "Segoe UI", sans-serif;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.footer h2.logo {
  font-size: 26px;
  color: #00c4cc;
  margin-bottom: 15px;
}

.footer-col h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #fff;
  border-left: 4px solid #00c4cc;
  padding-left: 8px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin: 8px 0;
}

.footer-col ul li a {
  color: #ddd;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #00c4cc;
  padding-left: 5px;
}

.footer p {
  color: #bbb;
  font-size: 14px;
  line-height: 1.6;
}

/* Newsletter Styling */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.newsletter-form input {
  padding: 10px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
}

.newsletter-form button {
  padding: 10px;
  background: #00c4cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.newsletter-form button:hover {
  background: #009fa6;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #333;
}

.footer-bottom p {
  font-size: 14px;
  color: #aaa;
}
.newsletter-form input {
  padding: 10px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* Input Active */
.newsletter-form input:focus {
  border: 2px solid #00c4cc;
  box-shadow: 0 0 8px rgba(0, 196, 204, 0.6);
}

.newsletter-form input:active {
  transform: scale(0.98);
  background: #f9f9f9;
}

.newsletter-form button {
  padding: 10px;
  background: #00c4cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

/* Button Hover & Active */
.newsletter-form button:hover {
  background: #009fa6;
}

.newsletter-form button:active {
  transform: scale(0.95);
  background: #007f83;
}

/* Utility */
li {
  list-style: none;
}
/* Carousal dots */
/* .carousel-dots {
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-direction: row;
}

.carousel-dots .dot {
    
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dots .dot.active {
    background-color: #333;
 } /* active dot */


/* News letter */
.newsletter-form button {
  transition: all 0.3s ease;
}

.newsletter-form button.subscribed {
  background-color: #4CAF50; /* green */
  color: #fff;
  transform: scale(1.1);
}

/* floating side bar */
.floating-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.sidebar-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 5px 0;
  background-color: #007BFF;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.3s;
}

.sidebar-btn:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

.sidebar-btn.whatsapp {
  background-color: #25D366;
}

.sidebar-btn.whatsapp:hover {
  background-color: #1ebe5d;
}

.sidebar-btn.email {
  background-color: #FF5733;
}

.sidebar-btn.email:hover {
  background-color: #e44a28;
}

.sidebar-btn.call {
  background-color: #007BFF;
}

.sidebar-btn.call:hover {
  background-color: #0056b3;
}

@media(max-width:768px){
  .floating-sidebar {
    right: 10px;
  }
  .sidebar-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}



/* Mobile Responsive Navbar */
@media (max-width: 768px) {
  .navbar {
    height: 20%;
    flex-direction: row;
    justify-content: space-between;
    padding: 2px 20px;
    position: sticky;
  }
  .dropdown {
    margin-right: 2vw;
    width: 100%;
    position: relative;
  }
  .dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }
  .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  .navbar .logo {
    position: absolute;
    left: 0.2vw;
    font-size: 3rem;
  }
  .enquire-btn1 {
    text-decoration: none;
    background: linear-gradient(90deg, #027f9d, #ffd700);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1.3rem;
    position: absolute;
    right: 2vw;
    top: 3vh;
    display: flex;
    box-shadow: black 0px 4px 6px -1px, black 0px 2px 4px -1px;
  }
  .enquire-btn1:hover {
    background: linear-gradient(90deg, #00b7c2, #ffa500);
    color: white;
    transition: all 0.3s ease-in-out;
    box-shadow: black 0px 6px 8px -1px, black 0px 4px 6px -1px;
  }
  .enquire-btn1:active {
    transform: scale(0.95);
    box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
  }
  /* Hide menu initially */
  .navbar .menu {
    display: none;
    flex-direction: column;
    width: 20vw;
    background: #181a1c;
    position: absolute;
    top: 100%;
    right: 0;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  .menu .dropdown span {
    position: static;
    margin-left: 6px;
  }

  /* space we’ll adjust via JS */
  .hero {
    transition: margin-top 0.25s ease;
  }

  /* Show menu when active */
  .navbar .menu.active {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 70vw;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 999;
  }
  .why-choose{
    padding: 20px;
  }

  .navbar .menu li {
    text-align: center;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
  }

  /* Show hamburger */
  .menu-toggle {
    display: flex;
  }

  /* Animate toggle */
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }
}
/* Tablet & Mobile (<= 768px) */
@media (max-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
  }
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .dropdown-menu {
    width: 70vw; /* <-- reduced width for dropdown menu */
    min-width: 180px;
    max-width: 95vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .navbar .menu {
    display: none;
    flex-direction: column;
    width: auto; /* Change from 100% to auto */
    background: transparent; /* Remove the white background */
    position: absolute;
    top: 100%;
    background-color: white;
    right: 2vw;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 999;
  }
  .navbar .menu.active {
    display: flex;
  }
  .dropdown-menu {
    width: 70vw; /* Your preferred dropdown width */
    min-width: 180px;
    max-width: 95vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff; /* Keep dropdown white */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .navbar .logo {
    position: absolute;
    left: 2vw;
    height: 10vh;
    margin-top: 1vh;
    font-size: 2rem;
  }
  .top-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .banner-contact {
    margin-right: 12vw;
  }
  .navbar .menu.active {
    display: flex;
  }
  .navbar .menu li {
    text-align: center;
    margin: 12px 0;
  }
  .enquire-btn {
    display: flex;
    position: absolute;
    right: 2vw;
    top: 4.8vh;
    height: 5vh !important;
    width: 20vw !important;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
  }
  .enquire-btn1 {
    display: none;
  }
  .menu .dropdown span {
    font-size: 1.4rem;
    position: static;
  }
  .menu {
    width: 50%;
  }
  .menu .dropdown {
    margin-right: 2vw;
    width: 50%;
  }
  .menu-toggle {
    display: flex;
  }
}

/* Specific for phones like Infinix Note 30 (<= 450px) */
@media (max-width: 450px) {
  *{
    margin: 0;
    padding: 0;
  }
  .navbar,
  .footer {
    max-width: 100%;

    box-sizing: border-box;
  }
  .dropdown-menu::-webkit-scrollbar {
    width: 1px;
  }
  .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    width: 10vw;
  }
  .dropdown-menu {
    display: none;
    max-height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 300px;
    width: 100% !important;
    position: relative !important;
    overflow-y: auto;
    box-sizing: border-box; /* ensures padding + width is respected */
    scrollbar-gutter: stable both-edges; /* smooth scrolling on iOS */
  }
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 20px;
    z-index: 10000;
  }

  .menu-toggle span {
    height: 3px;
    width: 30px;
    background: #ffffff;
    margin-bottom: 5px;
    border-radius: 2px;
    transition: 0.3s;
    font-size: 4rem;
  }

  /* Hamburger animation when open */
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 13px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -8px);
  }

  .dropdown-menu::-webkit-scrollbar {
    width: 0; /* hides scrollbar but keeps scrolling */
  }
  .dropdown {
    position: relative;
  }
  .menu .dropdown span {
    font-size: 1.4rem;
    position: absolute;
    bottom: 2.4vh;
    right: 1vw;
  }
  .enquire-btn1 {
    display: inline-block; /* make sure it shows */
    margin-left: auto; /* keeps it beside logo */
    z-index: 9999;
    position: absolute !important;
    right: 10vh;
    top: -11vh;
    border-radius: 5px;
    height: 7vh !important;
    width: 30vw !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(135deg, #ffff00, #005eff);
    position: fixed;
  }

  .navbar .logo {
    width: 50vw; /* desired width */
    height: 20vh; /* keeps aspect ratio */
    display: flex;

    justify-content: center;
    align-items: center;
    margin-top: 1vh;
    /* avoid pushing it sideways */
    /* your logo path */
    background-size: contain; /* fits whole image inside div */
    background-repeat: no-repeat;
    background-position: center;
    font-size: 2rem;
  }
  .enquire-btn1 {
    display: flex;
    height: 20vh;
    width: 20vw;
  }
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  .navbar {
    width: 100%;
    height: 15vh;
    padding: 8px 12px;
    position: sticky;
  }
  .menu.active {
    display: flex; /* expand instead of overlap */
  }

  .menu li {
    text-align: center;
    margin: 10px 0;
  }

  .navbar .logo a {
    font-size: 26px;
    margin-left: 10vw;
    /* reduce logo text size */
  }

  .navbar .menu li a {
    font-size: 14px; /* smaller links for narrow screen */
    padding: 10px;
  }

  .menu-toggle span {
    width: 1.5rem;
    transition: all 0.3s ease;
  }

  .navbar .menu {
    padding: 2px 0;
    width: 100vw;
    min-width: 220px;
    opacity: 0; /* invisible */
    pointer-events: none; /* prevent clicks while hidden */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  .navbar .menu.active {
    transform: translateX(0); /* slide in */
    opacity: 1; /* fade in */
    pointer-events: auto; /* allow clicks */
  }
  .menu {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    top: 0;
    left: 0;
    width: 100% !important; /* full width */
    /* height: 40vh;    full screen */
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #111; /* your background */
    list-style: none;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
  }
  .navbar .menu a {
    white-space: nowrap;
  }
  .dropdown-menu {
    position: static !important;
    top: 100%; /* open just below parent */
    left: 0; /* move to center */
    right: 0;
    /* transform: translateX(-50%); shift back by half its width */
    /* shrink to content */
    width: 95vw !important; /* <-- reduced width for dropdown menu */
    min-width: 0; /* full width of parent */
    max-width: 100vw; /* optional: keep a decent size */
    left: 50%;
    right: auto;
    margin: auto;
    background: #fff; /* or your theme background */
    text-align: center; /* center the text inside */
    border-radius: 6px; /* optional, for design */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    position: absolute;
    transform: translateX(-24%);
    /* keep hidden until hover */
    flex-direction: column;
    z-index: 999;
    box-sizing: content-box; /* ensures padding + width is respected */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  .dropdown.active .dropdown-menu {
    display: flex;
    max-height: 500px; /* adjust based on content */
    opacity: 1;
  }
  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    display: block; /* ⬅ expands and pushes content down */
  }
  .top-banner {
    display: none;
    width: 100%;
  }
  .menu .dropdown {
    border-bottom: 1px solid #ccc; /* line between items */
    padding: 15px 0; /* vertical spacing */
  }
  .menu .right-menu {
    border-bottom: 1px solid#ccc;
    padding: 15px 0;
  }
  .last-right-item {
    border-bottom: none;
  }
  /* Hero Section */
  .slide{
   background-repeat: no-repeat;
   background-position: center;
 width: 100%;
 height: 40%;
   background-size: cover;
   
  }

  /* slider */
  .overlay{
  
  /* decrease this if needed */
  box-sizing: border-box;

   width: 90%;          /* full width on mobile */
    height: auto;        /* height adapts to content */
    top: 20%;            /* move it closer to top */
    left: 50%;           /* center horizontally */
    transform: translateX(-50%);
    padding: 10px;
  
  }
  .overlay h1{
    font-size: 1rem;
  }
  .overlay .pop-up-enquire-btn{
    font-size: 0.50rem;
  }
  .overlay p{
    font-size: 7px;
  }
  .overlay button{
    font-size: 0.30rem;
    padding: 5px;
   
  }
  .buttons{
    display: flex;
    justify-content: center;
  }
 /* <!-- Features Section --> */
 .features{
  display: flex;
  flex-direction: column;
  margin-top: -25vh;
  justify-content: center;
  align-items: center;

 }
 
 .hero{
  height: auto;
   display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
 }
 .features img{
  width: 40vw;
 }
 .main-heading{
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* transform: translateX(-1%); */
 
 }
 .main-heading h2{
  margin-top: 5vh;
 }
  /* Service Section */
  .services-list{
    display: flex;
    flex-direction: row;
    height: auto;
        gap: 10px;  
    width: 100%;
   overflow-x: auto;
  scrollbar-width: 100%;
    
  }
  .service-item {
    flex: 0 0 auto;     /* prevent shrinking and let it scroll */
    width: 200px;       /* adjust based on your image size */
    text-align: center;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
        scroll-behavior: smooth;

}
.services-list .service-item:active{
  transform: scale(0.85);
  box-shadow: black 0px 2px 4px -1px, black 0px 1px 2px -1px;
  transform: rotateY(360deg);
}
.service-icon{
  width: 100%;
}
.carousel-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
   transform: rotate(-90deg); /* initial */
    transition: transform 0.5s ease;
}

/* about us section */
.about-us{
  display: flex;
  flex-direction: column;
}
.about-us button{
  width: 30vw;
margin-bottom: 2vh;
}
.middle-img{
  display: flex;
 align-items: center;
  width: 100%;
  height: auto;
 
}
.mid-image{
  width: 100%;

  height: 40vh;

}
/* end section */
.testimonal-container{
  overflow-x: auto;
  overflow-y: hidden;
}
.read-me-more{
  width: 40vw;
  
  
  text-align: center;

 

}
.read-me-more-btn{
  display: flex;
     /* prevent text from wrapping */
  width: 40vw;
  overflow: hidden;        /* optional: hide overflow if needed */
 text-align: center;
 align-items: center;
 justify-content: center;
 margin: auto;
 border-radius: 10px;
 height: 8vh;
 background-color: #10afb4;
 z-index: 2;
 border: none;
 box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
 transition: transform 0.3s ease;
}
.read-me-more-btn:active{
   box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
transform: scale(0.9);
}
.update-heading{
  display: flex;
  align-items: center;
text-align: center;
  width: auto ;
  justify-content: center;
  position: relative;
padding-bottom: 5vh;
}
.update-heading span{
  position: absolute;
  top: 5vh;
}

/* Updates */
.updates{
  width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;  
  
}
/* .read-me-more{
   box-shadow: rgb(255, 255, 255) 1px 2px 6px 6px;
 transition: transform 0.3s ease;
} */
.read-me-more:active{
transform: scale(0.98);
}
/* FAQ + Quote Section */
.faq-quote {
  display: flex;
  gap: 40px; /* space between FAQ and Quote */
  /* justify-content: space-between; */
 flex-direction: column; /* allows stacking on smaller screens */
  padding: 40px 20px;
  box-sizing: border-box;
  width: 100%;
}

/* FAQ box */
.faq-box {
  flex: 1 1 400px; /* min width 400px, flex-grow */
  max-width: 600px;
}

/* FAQ heading */
.faq-box h2 {
  font-size: 2rem; /* adjust font size for desktop */
  margin-bottom: 20px;
  line-height: 1.2; /* avoid extra space between lines */
  text-align: left;
}
.view-all{
 margin-left: 2vw;
 margin-top: 2vh;
}
.faq-question{
  width: 100%;
  text-align: left;
  margin-left: 1vw;
}
.quote-field{
   flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.quote-form{
  width: 100%;
}
/* container (make sure this selector matches your HTML) */
.carousel-dots {
  display: flex;               /* crucial: make it flexbox */
  flex-direction: row;        /* horizontal layout */
  flex-wrap: nowrap;          /* keep them on one line */
  gap: 10px;                  /* space between dots */
  justify-content: center;    /* center horizontally */
  align-items: center;
  margin: 16px 0;
  padding: 0;                 /* if using UL remove default padding */
  list-style: none;           /* remove bullets if UL */
  transform: none;            /* remove any tilt/rotation */
}

/* the dots */
.carousel-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color .25s, transform .2s;
  display: inline-block;      /* safe fallback */
}

/* active */
.carousel-dots .dot.active {
  background-color: #333;
  transform: scale(1.2);
}

 .quote-form input,
.quote-form select,
.quote-form button {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

  .quote-form button {
    padding: 12px; /* make the button bigger and easy to tap */
  }
}

@media (max-width: 1025px) and (min-width: 769px) {
  .top-banner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
  }

  .top-banner .banner-text {
    font-size: 2rem;
  }

  .top-banner span {
    font-size: 1.6rem;
  }

  .banner-contact .number {
    font-size: 2rem;
  }

  .banner-contact .call-us-txt {
    font-size: 1.6rem;
  }

  .banner-contact {
    margin-right: 10vw;
  }

  .enquire-btn {
    display: flex;
    margin-top: 3vh;
  }

  .navbar .logo {
    width: 40vw;
  }
  .menu .dropdown {
    border-bottom: 1px solid #ccc; /* line between items */
    padding: 15px 0; /* vertical spacing */
  }
  .menu .dropdown span {
    font-size: 1.7rem;
    position: absolute;
    left: 24vw;
    right: 1vw;
    bottom: 1vh;
  }
  .menu .dropdown .domestic {
    position: absolute;
    left: 22vw;
    right: 1vw;
    bottom: 1vh;
  }
  .menu .right-menu {
    border-bottom: 1px solid#ccc;
    padding: 15px 0;
  }
  .last-right-item {
    border-bottom: none;
  }
  /* Hamburger button visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    top: 90px;
    right: 20px;
  }
  .navbar .menu li a {
    font-size: 1.6rem; /* smaller links for narrow screen */
    padding: 10px;
  }
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(50deg) translate(20px, 28px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-50deg) translate(8px, -20px);
  }
  .menu-toggle span {
    width: 2rem;
  }
  .menu-toggle span {
    height: 7px;
    width: 50px;
    margin-top: 1vh;
    border-radius: 3px;
    background: #fff;
    transition: 0.3s;
  }
  .carousel-dots .dot {
    
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dots .dot.active {
    background-color: #333; /* active dot */
}
.carousel-dots {
  text-align: center;
  margin-top: 10px;
  display: flex;
  justify-content: center; /* keeps them centered horizontally */
  align-items: center;
  margin-bottom: 20px;
}

  /* Navbar menu sliding */
  .navbar .menu {
    position: fixed; /* fixed so it overlays content */
    top: 40vh;
    right: 0;
    height: 40vh;
    width: 60vw; /* 40% of the screen */
    background: #ffffff;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    transform: translateX(110%); /* hide off-screen initially */
    transition: transform 0.4s ease-in-out;
    flex-direction: column;
    z-index: 9999;
    /* enables vertical scroll */
  }
  .dropdown-menu {
    width: 100vw !important; /* <-- reduced width for dropdown menu */
    min-width: 0;
    max-width: 50vw;
    transform: translateX(-100%);
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: white; /* ensures padding + width is respected */
  }

  /* Show menu when active */
  .navbar .menu.active {
    transform: translateX(0); /* slide in */
  }

  /* Optional: adjust dropdown inside slide menu */
  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    display: block;
  }
}
@media (max-width: 350px) {
  .banner-contact {
    margin-right: 8vw;
  }
  .banner-contact .call-us-txt {
    font-size: 1rem;
  }
  .banner-contact .number {
    font-size: 1.2rem;
  }
  .navbar .menu li a {
    font-size: 1.2rem; /* smaller links for narrow screen */
    padding: 8px;
  }
  .enquire-btn {
    display: flex;
    margin-top: 3vh;
  }

  .navbar .logo {
    width: 40vw;
  }

  /* Hamburger button visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    z-index: 9999;
    font-size: 1rem;
    position: relative;
  }
  .navbar .menu li a {
    font-size: 1.6rem; /* smaller links for narrow screen */
    padding: 10px;
  }
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }

  .menu-toggle span {
    width: 2rem;
  }
  .menu-toggle span {
    height: 7px;
    width: 50px;
    margin-top: 1vh;
    border-radius: 3px;
    background: #fff;
    transition: 0.3s;
  }

  /* Navbar menu sliding */
  .navbar .menu {
    position: absolute; /* fixed so it overlays content */
    top: 22vh;
    right: 0;
    height: auto;
    width: 60vw; /* 40% of the screen */
    background: #ffffff;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    transform: translateX(110%); /* hide off-screen initially */
    transition: transform 0.4s ease-in-out;
    flex-direction: column;
    z-index: 999;
    overflow-x: hidden; /* enables vertical scroll */
  }
  .dropdown-menu {
    width: 100%; /* <-- reduced width for dropdown menu */
    min-width: 70vw;
    max-width: 100%;

    position: absolute;
    left: 0;
    right: -5vw;
    margin: 0;
    box-sizing: border-box;
    background-color: white; /* ensures padding + width is respected */
  }

  /* Show menu when active */
  .navbar .menu.active {
    transform: translateX(0); /* slide in */
  }

  /* Optional: adjust dropdown inside slide menu */
  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    display: block;
  }
}
/* Screens between 1025px and 2024px */
@media (min-width: 1025px) and (max-width: 1200px) {
  .top-banner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
    width: 100%;
  }

  .top-banner .banner-text {
    font-size: 2rem;
  }

  .top-banner span {
    font-size: 1.6rem;
  }

  .banner-contact .number {
    font-size: 2rem;
  }

  .banner-contact .call-us-txt {
    font-size: 1.6rem;
  }

  .banner-contact {
    margin-right: 10vw;
  }

  .enquire-btn {
    display: flex;
    margin-top: 3vh;
  }

  .navbar .logo {
    width: 40vw;
  }
  .menu .dropdown {
    border-bottom: 1px solid #ccc; /* line between items */
    padding: 15px 0; /* vertical spacing */
  }
  .menu .dropdown span {
    font-size: 3rem;
    position: absolute;
    left: 28vw;
    right: 1vw;
    bottom: 0.6vh;
  }
  .menu .dropdown .domestic {
    position: absolute;
    left: 25vw;
    right: 1vw;
    bottom: 1vh;
  }
  .menu .right-menu {
    border-bottom: 1px solid#ccc;
    padding: 15px 0;
  }
  .last-right-item {
    border-bottom: none;
  }
  /* Hamburger button visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    top: 90px;
    right: 20px;
  }
  .navbar .menu li a {
    font-size: 1.6rem; /* smaller links for narrow screen */
    padding: 10px;
  }
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(50deg) translate(20px, 28px);
  }
  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-50deg) translate(8px, -20px);
  }
  .menu-toggle span {
    width: 2rem;
  }
  .menu-toggle span {
    height: 7px;
    width: 50px;
    margin-top: 1vh;
    border-radius: 3px;
    background: #fff;
    transition: 0.3s;
  }

  /* Navbar menu sliding */
  .navbar .menu {
    position: fixed; /* fixed so it overlays content */
    top: 37vh;
    right: 0;
    height: 60vh;
    width: 70vw; /* 40% of the screen */
    background: #ffffff;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    transform: translateX(110%); /* hide off-screen initially */
    transition: transform 0.4s ease-in-out;
    flex-direction: column;
    z-index: 9999;
    /* enables vertical scroll */
  }
  .dropdown-menu {
    width: 100vw !important; /* <-- reduced width for dropdown menu */
    min-width: 0;
    max-width: 50vw;
    transform: translateX(-100%);
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: white; /* ensures padding + width is respected */
  }
  .navbar .menu .right-menu {
    font-family: Arial, Helvetica, sans-serif; /* Change to your desired font */
    font-size: 2.5rem; /* Adjust size as needed */
    font-weight: 600; /* Optional: make bold */
    /* Optional: change color */
  }
  .navbar .menu .last-right-item {
    font-family: Arial, Helvetica, sans-serif; /* Change to your desired font */
    font-size: 2.5rem; /* Adjust size as needed */
    font-weight: 600; /* Optional: make bold */
    /* Optional: change color */
  }
  .navbar .menu .dropdown a {
    font-family: Arial, Helvetica, sans-serif; /* Change to your desired font */
    font-size: 2.5rem; /* Adjust size as needed */
    font-weight: 600; /* Optional: make bold */
    /* Optional: change color */
  }

  /* Show menu when active */
  .navbar .menu.active {
    transform: translateX(0); /* slide in */
  }

  /* Optional: adjust dropdown inside slide menu */
  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    display: block;
  }
}

/* Oven Cleaning */
.oven-cleaning {
  padding: 60px 20px;
  background-color: #f4f7f9;
  text-align: left;
}

.oven-cleaning h2 {
  font-size: 2rem;
  color: #0077cc;
  margin-bottom: 25px;
  font-weight: 700;
}

.oven-cleaning h3 {
  font-size: 1.5rem;
  color: #0077cc;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}

.oven-cleaning .content-box {
  background-color: #fff;
  border-left: 5px solid #0077cc;
  padding: 20px 25px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-radius: 8px;
}

.oven-cleaning p {
  font-size: 1rem;
  color: #555;
  line-height: 1.8;
}

.oven-cleaning .cleaning-services {
  list-style: disc;
  padding-left: 25px;
  margin-bottom: 25px;
}

.oven-cleaning .cleaning-services li {
  margin-bottom: 10px;
  font-size: 1rem;
  color: #444;
}

/* Enquire Button */
.oven-cleaning .enquire-btn-all {
  display: inline-block;
  padding: 12px 25px;
  background-color: #0077cc;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.oven-cleaning .enquire-btn-all:hover {
  background-color: #005fa3;
  transform: translateY(-3px);
}

.oven-cleaning .enquire-btn-all:active {
  background-color: #004f84;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
  .oven-cleaning {
    padding: 40px 15px;
  }
}

.have-a-question{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.have-a-question h2{
    color: #ff0080;
    text-align: center;
}
.have-a-question h3{
    color: rgb(0, 166, 255);
    padding: 10px;
    font-size: 1.8rem;
}
.have-a-question button{
    border-radius: 10px;
    border: none;
    border: 1px #ff0080 solid;
    padding: 20px;
    margin-right: 2vw;
    margin-bottom: 2vh;
background-color: white;
   color: #ff0080;
   transition: ease-in 0.9s ease-out ;
   cursor: pointer;
}
.have-a-question button:hover{
background-color: #ff0080;
color: white;
}
.have-a-question .enquire-down-btn {
  position: relative;
  display: inline-block;
  padding: 12px 25px;
  background-color: #ff0080;
  color: white;
  border: none;
  height: 10vh;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  font-size: 1rem;
}


/* Shine effect */
.have-a-question .enquire-down-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
}

.have-a-question .enquire-down-btn:hover::before {
  animation: shine 0.8s ease forwards;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}