@import url('https://fonts.googleapis.com/css2?family=Abel&family=Edu+NSW+ACT+Cursive:wght@400..700&family=Federant&family=Mozilla+Headline:wght@200..700&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');


body{
  margin: 0px;
  padding: 0px;
}
.top{
/* min-height: 600px; */
/* background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5)),
 url("../images/download.jpg");  */
 background:white;
background-size: cover;
background-position: center;

}
#nav-bar{
display : flex;
flex-direction: row;
/* justify-content: space-between; */
/* width: 100%; */
gap: 20%;
height: 0px;

}
.logo{
width:15%;
/* height : 100px; */
margin-left: 2%;
margin-top: 3%;
}
.logo img{
  max-width: 100%;
  height: auto;
}
.hamburger{
 display: none;
/* text-align: right;
width: 40%;
position: relative;
margin-top: 3%;
left: 23%;
right: 0%; */
}
/* .line{
  width: 20%;
  height: 2px;
  background-color: rgb(255, 255, 255);
  margin-top:5px;
} */
.pages-li{
  max-width: 100%;
}
.pages-li ul {
 display: flex;
 flex-direction: row;
 list-style: none;
  /* margin-top: 4%;
  position: fixed; */
  margin-top: 15%;

}
.pages-li a{
  text-decoration: none;
 color: black;
   /* margin-left: 10%; */
   /* font-family: "Edu NSW ACT Cursive", cursive; */
    font-family: "Titillium Web", sans-serif;
   font-size: 1.2rem;
   font-weight: 600;
z-index: 1000;
position: relative;
}
.pages-li a:hover{
text-decoration: underline;
cursor: pointer;
color: rgb(147, 147, 147);
}
.pages-li a:active{
  text-decoration: none;
color: black;
}
.pages-li li{
  margin-left: 18%;
}
#hero{
display: flex;
flex-direction: row;
justify-content: space-around;
/* gap: 10%; */
/* height: 400px; */

}
.heading-moto{
  font-size: 2.5rem;
  /* font-family: "Mozilla Headline", sans-serif; */
   font-family: "Titillium Web", sans-serif;
  color: rgb(255, 38, 0);
  margin-bottom: 0px;
  margin-top: 50%;
  /* padding-left: 2%; */

}
.message{
  font-size: 1.2rem;
   /* font-family: "Edu NSW ACT Cursive", cursive; */
    font-family: "Titillium Web", sans-serif;
   color: black;
   /* margin-bottom: 0px; */
   /* padding-left: 2%; */
   margin-top: 0px;
  
}
.Qurry{
  margin: 2%;
  margin-top: 5%;
  width: 30%;
  height: 32px;
  color: black;
  background: none;
  border: 1px solid black;
  font-size: 1rem;
  font-weight: 600;
  /* font-family: "Edu NSW ACT Cursive", cursive; */
   font-family: "Titillium Web", sans-serif;
}
.Qurry:hover{
  background: #ff2200;
color: white;
border: none;
}
.Qurry:active{
  background: none;

}
.left{
  /* width: 60%; */
height: auto;
}
.right{
/* width:50%; */
margin-top: 0px;
height: auto;
/* text-align: right; */
background-position: center;
background-size: cover;

}
.right img{
  /* width: 100%; */
  height: 600px;
  max-width: 100%;
  transition: opacity 1s ease-in-out , transform 1s ease;
  object-fit: cover;
  /* z-index: 999; */
  /* position: relative */
  pointer-events: none;
}
.center{

}
#about{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 7%;
text-align: center;
}
.for-about-img{
  width: 50%;
  background-size: cover;
  /* border-radius: 70%; */
/* border: 4px solid rgb(50, 135, 19); */
}
.for-about-img img{
max-width: 90%;
border-radius: 5%;
/* border: 4px solid rgb(0, 0, 0); */
/* background-size: cover; */
}
.about-theory{
  width: 50%;
}
.about-heading{
font-size: 2rem;
/* font-family: "Edu NSW ACT Cursive", cursive; */
 font-family: "Titillium Web", sans-serif;

}
.para-about{
  /* font-family: "Mozilla Headline", sans-serif; */
   font-family: "Titillium Web", sans-serif;
  font-size: 1rem;
  padding: 8%;

}
#ratings{
  max-width: 100%;
  display: flex;
  flex-direction: row;
}
.rating-h{
  text-align: center;
  margin: 0px;
  font-size: 1rem;
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
}
.box2{
width:20%;
border: 0.5px solid rgb(207, 207, 207);
height: 80px;
margin:2%;
margin-left: 3%;
border-radius: 10px;
box-shadow: 3px 3px 3px rgb(146, 146, 146);
}
.rating-1, .rating-2, .rating-3, .rating-4{
transform: translateY(0px);
transition: transform 1s ease, opacity 1s ease;
opacity: 0;
/* animation : ratings 1s linear; */
}
.rating-1.ana{animation : ratings 1s linear forwards; animation-delay: 0.5s;}
.rating-2.ana{animation : ratings 1s linear forwards; animation-delay: 1s;}
.rating-3.ana{animation : ratings 1s linear forwards; animation-delay: 1.5s;}
.rating-4.ana{animation : ratings 1s linear forwards; animation-delay: 2s;}

@keyframes ratings {
  0%{transform: translateY(150px); opacity: 0;}
  50%{transform: translateY(50px); opacity: 0.5;}
  100%{transform: translateY(0px); opacity: 1;}
}


.customer-satisfaction{
text-align: center;
font-size: 2rem;
margin: 0px;
padding:2%;
color: green;

}
.work-force{
  text-align: center;
font-size: 1.9rem;
margin: 0px;
padding:2%;
color: green;

}
.experinece{
  text-align: center;
font-size: 1.9rem;
margin: 0px;
padding:2%;
color: green;

}
.happy-customer{
  text-align: center;
font-size: 1.9rem;
margin: 0px;
padding:2%;
color: green;

}
.heading-for-products{
font-size: 3rem;
font-weight: 600;
margin-top: 10%;
max-width: 100%;
text-align: center;
/* font-family: "Mozilla Headline", sans-serif;  */
font-family: "Titillium Web", sans-serif;

}
#product-container{
height: 520px;
max-width: 100%;
background-color: black;
}

#products {
display: flex;
flex-direction: row;
justify-content: space-around;
height: auto;
}


.product-img{
width: 30%;
height: 300px;
background-color: rgb(0, 0, 0);
margin-top: 5%;


}
.product-img img{
  max-width: 100%;
  height: auto;
  object-fit: cover;

}
.product-img img:hover{
box-shadow: 2px 5px 5px rgb(162, 162, 162);
cursor: pointer;
}
.buttons{
display: flex;
flex-direction: row;
justify-content: space-around;
display: none;
}
/* .left-arrow{
width: 5%;
margin-top: 10%;
height: 80px;
}
.left-arrow:hover{
  border: 1px solid rgb(71, 71, 71);
}
.left-arrow:active{
  border: none;
}
.right-arrow{
  width: 5%;
margin-top: 10%;
height: 80px;

}
.right-arrow:hover{
  border: 1px solid rgb(88, 88, 88);
}
.right-arrow:active{
  border: none;
} */
#services{
/* display: flex;
flex-direction: row;
justify-content: space-between; */
margin-top: 10%;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
url("../images/Untitled design (7).png");
background-position: center;
background-size: cover;

}
.service-container{
display: flex;
flex-direction: column;

font-size: 1rem;
/* font-family: "Mozilla Headline", sans-serif; */
 font-family: "Titillium Web", sans-serif;
 /* height: 750px; */
}
.other-services-heading{
/* font-family: "Edu NSW ACT Cursive", cursive; */
 font-family: "Titillium Web", sans-serif;
font-size: 2.7rem;
/* text-decoration: underline; */
color: rgb(214, 9, 2);
/* padding-left: 40%; */
text-align: center;
margin-bottom:5%;

}


.one, .two, .three, .four, .five, .six, .seven, .eight, .nine{
  /* animation: services 9s ease forwards ; */
  transform: translateX(-150px);
  opacity: 0;
  color: white;
  margin-left: 8%;
  font-weight: 500;
  font-size: 1.5rem;
/* transition: transform 1s ease, opacity 1s ease; */
margin-top: 0px;
}

.one.animate{animation: services 1s ease forwards; animation-delay: 0s;}
.two.animate{animation: services 1s ease forwards; animation-delay: 1s;}
.three.animate{animation: services 1s ease forwards; animation-delay: 2s;}
.four.animate{animation: services 1s ease forwards; animation-delay: 3s;}
.five.animate{animation: services 1s ease forwards; animation-delay: 4s;}
.six.animate{animation: services 1s ease forwards; animation-delay: 5s;}
.seven.animate{animation: services 1s ease forwards; animation-delay: 6s;}
.eight.animate{animation: services 1s ease forwards; animation-delay: 7s;}
.nine.animate{animation: services 1s ease forwards; animation-delay: 8s;}

@keyframes services {

  0% {opacity: 0; transform: translate(-150px);}
  100% {opacity: 1; transform: translate(0px);}
  
}

/* .service-image{
width: 40%;
margin-right:5%;
margin-top:5%;
}
.service-image img{
  height: auto;
  max-width: 100%;
} */
.contact-heading{
  font-size: 2.5rem;
  /* font-family: "Edu NSW ACT Cursive", cursive; */
   font-family: "Titillium Web", sans-serif;
  text-align: center;
  text-decoration: underline;
  max-width: 100%;
  color: green;
  margin-top: 5%;
  
}
#contact{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 5%;
}
.number{
  width: 40%;
  /* padding-left:5%; */
  text-align: center;
  display: flex;
flex-direction: column;
font-size: 1.1rem;
/* font-family: "Mozilla Headline", sans-serif; */
 font-family: "Titillium Web", sans-serif;
}
.num{


}
.location{
  width:55%;
  /* margin-left: 1%; */
  text-align: left;
  display: flex;
  flex-direction: column;
font-size: 1.1rem;
/* font-family: "Mozilla Headline", sans-serif; */
 font-family: "Titillium Web", sans-serif;
}
.address{

}
.email{

}
.social-media{
  display: flex;
  text-align: center;
  justify-content: center;

}
.logo-f{
  width:3%;
  height:30px;
  margin: 2%;
  margin-top: 2%;
  /* margin-bottom: 0px; */
 
}
.logo-f img{
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}
.logo-f img:hover{
  box-shadow: 2px 2px 2px rgb(121, 120, 120);
}
.bottom{
/* height: 150px; */
max-width: 100%;
text-align: center;
padding-bottom: 2%;
background-color: rgb(236, 236, 236);

}
.ind-name{
  padding-top: 5%;
  font-size: 2.5rem;
  /* font-family: "Mozilla Headline", sans-serif; */
   font-family: "Titillium Web", sans-serif;

}
.add{
  /* font-family: "Mozilla Headline", sans-serif; */
   font-family: "Titillium Web", sans-serif;

}
.slide-bar{
  display: none;
  /* visibility: hidden; */
}
.pages-li-slide{
  display: none;
}
.box{
  border: 2px solid rgb(255, 0, 0);
  width: 50%;
  height: 0px;
  max-width: 100%;
  text-align: center;
  margin-left: 25%;
  /* visibility: hidden; */
  /* display: none; */
  opacity: 0;
  transform: translateY(-500px);
  transition: height 1s ease, opacity 0.5s ease, transform 0.5s ease;;
}
.box.active{
  height: 300px;
  opacity: 1;
  transform: translateY(0px);
  margin-top: 15%;
}

.message-input{
height: 30px;
width: 70%;
margin: 2%;
}
.number-input{
height: 30px;
width: 70%;
margin: 2%;
}
.box-heading{
color: rgb(0, 0, 0);
font-size: 1.5rem;
 /* font-family: "Edu NSW ACT Cursive", cursive; */
  font-family: "Titillium Web", sans-serif;
}
.sumbit-btn{
width: 40%;
height: 30px;
margin: 2%;
/* margin-top: 5%; */
background-color: rgba(52, 120, 10, 0.759);
border: none;
border-radius: 10px;
color: white;
font-size: 1.1rem;
}
.sumbit-btn:hover{
  box-shadow: 2px 2px 2px rgb(33, 33, 33);
}
.sumbit-btn:active{
  box-shadow: none;
}
.close-btn{
  position: relative;
  left: 40%;
  bottom: 20%;
  background: none;
  border: none;
  height: 30px;
}
.close-btn:hover{
  /* box-shadow: 1px 1px 1px rgb(255, 255, 255);
   */
   border: 0.5px solid rgb(23, 23, 23);
  border-radius: 50%;
}
/* .icon-logo{
  width:100%;

}
.icon-logo img{
  width: 100%;
} */

/* RESPONSIVE THING */
@media(max-width: 480px){
.pages-li ul{
  display: none;
}
.logo{
width: 30%;
margin:5%;
}
.heading-moto{
  font-size: 1.4rem;
  margin-top: 20%;
}
.right img{
  height: 350px;
}
.right{
  max-width: 100%;
  text-align: center;
}
.message{
font-size: 0.8rem;
}
.left{
  margin-top: 0%;
  /* width: 40%; */
  margin-left: 2%; /*REMOVE IF SCREEN DANCING */
max-width:100%;
text-align: center;
}
.Qurry{
  width: 50%;
  font-size: 0.9rem;
  height: 30px;
}
.hamburger{
  display: block;
  /* text-align: right; */
width: 7%;
position: relative;
margin-top: 5%;
left: 30%;
right: 0%;

height: 25px;
}

.line{
  /* width: 20%; */
  height: 2px;
  background-color: rgb(0, 0, 0);
  margin-top:5px;
}
.hamburger:hover{
  border: 2px solid grey;
}
.hamburger:active{
  border: none;
}


#nav-bar{
  height: auto;
}
#about{
  flex-direction: column-reverse;
}
.for-about-img{
  width: 100%;
}
.for-about-img img{
  border-radius: 5%;
  border: none;
}
.about-theory{
  width: 100%;
}
.heading-for-products{
  font-size: 2rem;
}
#products{
  flex-direction: column;
height: 600px;
  text-align: center;
  margin-bottom: 15%;
}
.product-img{
  height: auto;
  width: 80%;
  /* margin: 5%; */
}
#product-container{
  height: auto;
}
.other-services-heading{
  padding-left: 10%;
  margin: 10px;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine{
  transform: translateX(50px);
  width: 70%;
  /* margin: 10px; */
}
@keyframes services {
   0% {opacity: 0; transform: translate(0px);}
  100% {opacity: 1; transform: translate(50px);}
}
.service-image img{
  display:none;
}
.number{
  font-size: 0.8rem;
}
.location{
  font-size: 0.8rem;
}
.ind-name{
  font-size: 2rem;
}
#hero{
  /* margin-top: 25%; */
  flex-direction: column;
}
.top {
  min-height: 600px;
  /* z-index: 10; */
}
.slide-bar{
  display: none;
  /* visibility: hidden; */
  width: 100%;
  text-align: center;
  height: 350px;
  background-color: rgba(0, 0, 0, 0.273);
  transform: translateY(-100px);
  /* opacity: 0; */
  transition:  transform 1s ease;
 
}
.slide-bar.show{
  display:block;
transform: translateY(0px);
}
.pages-li-slide{
  display: block;
}
.pages-li-slide li{
 padding-top: 5%;
}

.pages-li-slide li a{
text-decoration: none;
color: white;
font-size: 1rem;
/* margin-top:5%; */
}
.pages-li-slide li a:hover{
  color: rgb(0, 0, 0);
}
.pages-li-slide li a:active{
  color: white;
}
.pages-li-slide ul{
list-style: none;
padding: 5%;
}
.logo-f{
  width: 7%;
}
.left-arrow{
  height: 50px;
  width: 7%;
  margin-top: 2%;
}
.right-arrow{
   height: 50px;
  width: 7%;
  margin-top: 2%;
}
.service-container{
  background: linear-gradient(rgba(41, 41, 41, 0.278), rgba(120, 120, 120, 0.418)), url('http://127.0.0.1:5500/images/WhatsApp%20Image%202025-09-20%20at%2011.51.58%20AM.jpeg');
  background-position: center;
  background-size: cover;
  font-weight: 600;
  color: white;
  
}
#services{
  display: block;
}
.box-heading{
  font-size: 0.9rem;
   padding-top: 17%;
   margin: 0%;
}
.close-btn{
  bottom: 18%;
}
.message-input{
  margin-bottom: 15%;
  height: 20px;
}
.number-input{
  margin-bottom: 15%;
   height: 20px;
}
.rating-h{
  font-size: 0.7rem;
}
.customer-satisfaction{
  font-size: 1.5rem;
}
.work-force{
font-size: 1.5rem;
}
.happy-customer{
font-size: 1.5rem;
}
.experinece{
font-size: 1.5rem;
}
.box2{
  height: 70px;
}
.product2{
  display: none;
}
.product3{
  display: none;
}
.product1{
  width: 100%;
  /* margin: 2%; */
}


}