section,h1,h2,.card{position:relative;}
h1,h2{width:fit-content}
  h1{text-align: center;color: var(--primary-color);font-size:1.3em;padding: 0 5%;}
  h2{font-size:1.3em;text-align: center;}
h1,h2,h4,.card span,.abt a{text-transform:uppercase;}

h3{text-transform:capitalize;font-size:1em;margin: 0;}
h3,h4{text-align:center;}
p{font-size:16px;text-align:justify;text-align-last:center;padding:0 5%;}
.cards,.card,.contact1,.contact2,.about-text,.abt,.contact2-content,.content,.contact{display:flex;justify-content:center;align-items:center;flex-direction:column;align-self:center;flex-grow:1;}
.card img,.card span,.abt img,.contact img,.horizontal,.cards2 h4,.contact2{width:100%;}
.abt img{margin-bottom:2vh;}
#homepage{overflow:hidden;height: 100vh;}
video{position: absolute;width:100%;bottom: 0;height: 100vh;object-fit: cover;}
.card span,.horizontal{position:absolute;bottom:0;left:0;}
.card,.contact2 a,.abt a{color:white;}
.h1{font-size:2em;margin:0 0 0 5%;background:padding-box text #000;-webkit-text-stroke-width:calc(1em/13);-webkit-text-stroke-color:#0f0f0f00;}
.h1::after{content:'';width:100%;height:.8vh;position:absolute;bottom:-2.5vh;left:0;}
.cards,.cards2{width:90%;}
.animate{width:3%;height:50%;position:absolute;top:50vh;left:0;background-color:var(--primary-color);}
h2 .underline {
  display: block;
  height: 4px;
  width: 100%;
  background: var(--primary-color);
  transform-origin: left;
}

/*cleaningsolutions*/
.cards{gap:8vh;}
.cleaning h2{ white-space: nowrap;}
.packaging .content{padding:0 10%;}
.card,.about img,.contact img,.abt a{border-radius:30px;}
.card span,.cards2 h4,.abt a{background:linear-gradient(90deg,#ff8800,#ffc18f,#ec7e00);text-align:center;padding:2% 0;font-size:1.5em;font-weight:600;}
.cleaning,.packaging{padding-bottom:5%;}
.cards2 h4{margin:0;}.abt{flex:1;}.abt a{padding:2% 3%;font-size:20px;}
.contact2-content h4{color:var(--primary-color);}
.contact2 a,.abt a,.card{text-decoration:none;}
.contact2{margin-top:5vh;}
.contact2{background-color:var(--secondary-color);padding-top: 2vh;}
.card::after{content:'Read More';position: absolute;height: 3vh;width: 50%;left: 50%;transform: translateX(-50%);background:linear-gradient(90deg,#ff8800,#ffc18f,#ec7e00);color: white;bottom:-3vh;text-align: center;}
.cleaning .card{padding-bottom: 3vh;}
.card::after,.card h4,.card span{border-bottom-right-radius: 30px;border-bottom-left-radius:30px ;}
.card img{border-radius: 30px;}
.cards2 .card img{border-radius: 0;border-top-right-radius: 30px;border-top-left-radius:30px ;}
.phone{display: flex;gap:5vw;}
.homepage-text{position: absolute;left: 1%;bottom: 5%;height: 40%;width: 90%;background-color: rgba(255, 255, 255, 0.767);
  display: flex;flex-direction: column;align-items: center;justify-content: center;transform-origin: left;
border-bottom-right-radius: 30px;border-top-right-radius: 30px;}
.content{margin-top:3vh;overflow: hidden;padding-bottom: 5vh !important;}
.homepage-text p{text-align: justify;text-align-last:center;padding: 0 10%;}
/*map*/
.leaflet-control-attribution{display: none;}
#map {
  height:50vh;
  display: block;margin:2vh auto 0;
  width: 80%;border-radius: 20px;border: 2px solid orange;z-index:2;
}
.pulse {
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.5);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 165, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
  }
}
.leaflet-popup-content{width: fit-content !important;}
/*forgsap*/
section{overflow-x:hidden;}
.animate{transform-origin:top;}
@media only screen and (min-width:600px){
h1{font-size:2em;}
h2{font-size:2em;text-align: center;}
h3{font-size:1.5em;}
p{font-size:20px;}
.homepage-text{bottom: 10%;height:30%;width:70%;}}
@media only screen and (min-width:992px){
.animate{width: 1%;}
.homepage-text{bottom: 5%;height:40%;width:70%;}
h3{font-size:1.8em;}
p{text-align:left;text-align-last:left;padding:0 10% 0 0;font-size:1.3em;}
.about p,.contact p{text-align:justify;text-align-last:center;padding:0 10%;}
section{min-height:80vh;display:flex;}
.cleaning,.packaging{min-height:95vh;}
.cards{flex-direction:row;flex-wrap:wrap;gap:5%;}
.cleaning .cards{row-gap:1vh;}
.about-text,.contact2{flex-direction:row;}
.contact1{flex-direction:row-reverse;}
.contact1a,.contact1b{flex:1;}
.content{align-items:flex-start;padding-bottom: 0 !important;}
.contact2-content{flex:1;}
.packaging .content{padding:2% 5% 0;}
.card{width:32%;margin:3% 0;}
.cards2{flex-wrap:nowrap;width:70%;gap: 10vw;}
.contact2 a{font-size:1em;margin-top:1vh;}
.contact2 h4{font-size:1.5em;margin:0;} 
#map {height:60vh;width: 50%;}
.contact h2,.cleaning h2,.cleaning h3,.cleaning p,.about h2{padding-left:5%;}
.abt img{width:80%;}
  }
@media only screen and (min-width:1700px){
.contact2{padding:1% 0 5%;}
 
}