/* !important > inline style html > id > class or pseudo(:) (last one) > element (last one) > universal */
/* least priority to 1` change all elements */

/* #2be07a */

* :focus{
  outline:solid;
  outline-offset: 2px;
  outline-width: thin;
  outline-color: rgb(89, 236, 153);
}

* {
  font-family: "DM Sans", sans-serif;
  color: rgb(186, 181, 181);
  /* background-color:#000000; */
  /* z-index: -1; */
  text-decoration: none;
  padding: 0;
  margin: 0 0;
  box-sizing: border-box;
}

html {
  /* default 1.6rem */
  /* 1px / 1.6rem = 0.625  */
  font-size: 62.5%;   /* current 1rem = 1rem */
  scroll-behavior: smooth;
}

body {
    max-width: 100vw;
  background-color: #000000;
}

/* HEADER */

.allcontact{
  display: none;
}

.header-all-value {
  margin: 0.8vw 0 0;
  padding-bottom: 0.8vw;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.8vw;
}

.inside-header-value {
  padding: 0 1rem;
  font-size: 1rem;
}

.inside-header-value.three {
  flex: 1 1 2.5vw;
}

.i-need-help {
  padding-right: 2vw;
  color: #A3A3A3;
}

a.call-us-no,
a.email-us-email {
  color: #A3A3A3;
}

/* NAVIGATION */
.nav-section {
  display: grid;
  width: 100vw;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  column-gap: 0.7vw;
  background-color: rgb(16, 16, 16);
  margin-bottom: 0.8vw;
  position: sticky;
  top:0;
  z-index: 10;
}

/* display: flex;
    justify-content:end;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 2rem; */
/* box-shadow: 0 0.5rem 1.5rem color; */
/* background-color:; */
/* opacity: 1; */

.logo-div {
  background-color: rgb(16, 16, 16);
  /* position: sticky; */
  grid-column: 1/2;
}

.nav-div {
  display: flex;
  background-color: rgb(16, 16, 16);
  /* justify-content: space-between; */
  align-items: center;
  align-content: center;
  grid-column: 3/-1;
  gap: 1.5vw;
  /* padding-right: 5rem; */
  /* position: sticky; */
}

.main-nav {
  display: inline-flex;
  align-items: center;
  height: 4vw;
  position:relative;
  float: left;
}

.main-nav.logo img {
  width: 15vw;
  background-color: rgb(16, 16, 16);
  /* position: sticky; */
  margin-left: 2vw;
}

.main-nav img{
  background-color: rgba(255, 255, 255, 0) !important;
}

.main-nav.quote button {
  border: 0 solid #eaff96;
  color: rgb(43, 224, 122);
  background-color: rgb(16, 16, 16);
  font-size: 1.2vw;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  padding-left: 5vw;
  transition: all 500ms;
  /* position: sticky; */
}


.nav-heading {
  color: #A3A3A3;
  font-size: 1vw;
  background-color: rgba(16, 16, 16, 0);
  /* position: sticky; */
}

.side-menu{
  display: none;
}

/* SUB NAVIGATION */
.sub-nav {
  font-size: 0.9vw;
  list-style: none;
  position: absolute;
  top: 4vw;
  left: -3.5vw;
  width: 12vw;
  height: auto;
  background-color: rgba(16, 16, 16, 0.94);
  border-radius: 0.5vw;
  padding: 2vw 0 1vw 0;
  display: none;
  /* position: absolute; */
  /* position: sticky; */
}

.sub-nav-text {
  padding: 0 1vw;
  margin: 0.6vw 0 0.6vw;
  /* position: sticky; */
}

/*  HOW we WORKs  */

.background-image {
  margin: 0 2.5vw 0 2.5vw;
  width: 95vw;
  height: 36.8vw;
  border-radius: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 2rem rgba(43, 224, 121, 0.4);
}

.how-we-works.image {  
  width: 95vw;
  height: 42.8vw;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgb(0, 113, 45)),
                    url(../images/our-work-HQ.webp);
}

.how-we-works.text {
  text-shadow: 0.1rem 0.1rem rgb(16, 16, 16);
  padding: 0 4rem;
  background: none;
  position: absolute;
  top: 7.5vw;
  left: 6vw;
  /* text-align: end; */
}

.works-quote-head {
  font-size: 5vw;
  background: none;
}

h4 {
  margin: 0.8vw 0 2vw;
  color: whitesmoke;
  background: none;
}

.works-quote-head-para {
  font-size: 1.8vw;
}

.works-quote-head-para p {
  margin: 1vw 0 2vw;
  color: whitesmoke;
  background: none;
}

.works-quote-offers {
  font-size: 1.5vw;
  padding: 0 3vw;
  margin: 0.8vw 0 0.8vw;
  background: none;
}

.works-quote-offers li,
.works-quote-offers ul {
  margin: 0.6vw 0 0.6vw;
  color: whitesmoke;
  background: none;
}

.works-quote-offers-button {
  font-size: 2.5vw;
  padding: 0.5vw 1vw;
  border-radius: 0.8vw;
  color: rgb(43, 224, 122);
  background-color: #000000;
  box-shadow: 0 0.8vw 0.8vw #031509;
  position: absolute;
  top: 30vw;
  left: 4vw;
  /* background-image: linear-gradient(to bottom, transparent 0%, white 100%); */
}

.works-button{
  border: 0 rgba(144, 136, 136, 0);
}

/* SERVICE */

.services-we-offers {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.8vw;
  /* display: none; */
}

.our-services-card {
  padding: 0.8vw 2.5vw;
  height: 35vw;
  margin: 1.6vw 2vw;
  /* width here */
  /* flex: 1 1 20%;  */
}

.our-services-card p {
  font-size: 1vw;
  line-height: 1.7;
  word-spacing: 0.3vw;
  letter-spacing: 0.1rem;
  height: 20rem;
  /* padding-bottom: 3rem; */
  margin: 0.6vw 0 0.6vw;
  /* height: 12vw; */
  color: rgb(255, 255, 255);
  /* text-align:center; */
  /* vertical-align:text-top; */
}

h5 {
  font-size: 3.2vw;
  padding: 0 3.5vw;
  margin: 7vw 0  5vw;
  text-align: center;
  color: #e3e8e3;
}

h6 {
  font-size: 1.6vw;
  word-spacing: 0.3vw;
  letter-spacing: 0.1rem;
  margin: 2vw 0 1.8vw;
  padding-bottom: 1.8vw;
  color: rgb(223, 234, 223);
  /* text-align: center; */
  /* height: 10rem; */
  /* vertical-align:text-bottom; */
}

.banners-section {
  margin: 0 2rem 1rem;
  display: none;
}

.featured-banners {
  width: 130rem;
  height: 20rem;
}

.banners-section a {
  display: flex;
  gap: 2rem;
}


.working-process{
  width: 100%;
  /* height: 320rem; */
  column-gap: 5vw;
  row-gap: 3vw;
  align-items: center;
  margin-top: 8vw;
  margin-bottom: 8vw;
  display: grid ;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  /* display: none; */
}

.working-process img{
  width: 24vw;
  border-radius: 0.4vw;
  box-shadow: 0.2rem 0.5rem 2rem -1.2rem #939393;
  
  /* background-color: #000000; */
}

.working-process .img-right{
  padding-left: 4vw;
  border-left: 0.1rem solid rgba(43, 224, 121, 0.556);
}

.working-process .img-left{
  text-align: end;
  padding-right: 4vw;
  border-right: 0.1rem solid rgba(43, 224, 121, 0.556);
}

.working-process p{
  font-size: 2.2vw;
  text-align: end;
  /* background-color: #000000; */
}

.share p, .modify p, .removal p, .delivery p{
  padding-left: 15vw;
  
}

.analysis p, .printing p, .painting p, .feedback p{
  text-align: start;
  padding-right: 15vw;
}

/* .working-process div{
  background-color: rgb(0, 0, 0);
} */

/* PRODUCTs */

.shop-section{
  display: none;
}

.products-images {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 1rem;
}

.product {
  margin: 1.5rem 2rem 1rem;
}

.products-images img {
  width: 100%;
  height: 25rem;
  border-radius: 0.6rem;
  box-shadow: 0.2rem 0.5rem 2rem -1.2rem #939393;
}

/* // Industries we serves */

.indu-para {
  font-size: 1.5vw;
  padding: 0 1.5rem;
  margin: 4vw 0 8vw;
  color: rgb(89, 236, 153);
  text-align: center;
  /* color: rgb(191, 194, 191); */
}

.industries-section{
  width: 95%;
  margin: 0 2.5% 8vw;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  align-items: center;
  align-content: center;
  /* display: none; */
}

.industries-we-serve-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  text-align: center;
  justify-items: center;
  align-items: baseline;
  row-gap: 5.5vw;
  column-gap: 5.3vw;
  /* width: 100%; */
  padding: 0 0;
}

.industries-we-serve-list div{
  width: 13vw;
}

.industries-we-serve-list h6{
  font-size: 1.2vw;
  /* position: relative; */
  /* top: -15rem; */
  margin: 0 0 0;
  padding: 0.8vw 0;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.597);
}

.industries-we-serve-list img{
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  box-shadow: 0.2rem 0.5rem 2rem -1.2rem #ffffff;
  margin: 0 0;
}

.trusted-section {
  display: none;
}

.trusted-by img {
  width: 23%;
  height: 25rem;
  margin: 2rem 2rem 2rem;
  display: inline-block;
}

.client-section {
  display: none;
}

.clients-reviews img {
  width: 23%;
  height: 25rem;
  margin: 2rem 2rem 2rem;
  display: inline-block;
}

.bNn-section{
  display: none;
}

.blogs-news {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 1rem;
}

.blogs-news img {
  width: 23%;
  height: 25rem;
  margin: 2rem 2rem 2rem;
  flex: auto;
}

.faqs-section {
  display: none;
}

.faqs .faqs-list {
  width: 100%;
  height: 25rem;
  margin: 2rem 2rem 2rem;
  display: block;
}

/* .faqs-list span.answer{
    display: inline;
} */

.query {
  font-size: 2.4rem;
  padding: 0 1.5rem;
  margin: 1rem 0 1rem;
  display: block;
}

.answer {
  font-size: 2rem;
  padding: 0 4rem;
  margin: 1rem 0 1rem;
  display: flex;
  align-items: center;
  text-align: center;
}

/* Footer */

footer {
  width: 100vw;
  height: 40vw;
  border-top: 0.1rem solid rgb(191, 194, 191);
  display: flex;
  flex-direction: column;
  /* display: none; */
  /* gap: 2rem; */
}

.footer-head {
  /* height: 22.5rem; */
  font-size: 1.4vw;
  text-align: center;
  padding-top: 1.2vw;
  /* margin: 3rem 0 1rem; */
  display: grid;
  grid-template-columns: repeat(5,1fr);
  column-gap: 6vw;
  margin: 0 4vw;
}

.footer-nav-head a{
  display: grid;
  grid-template-columns: 1fr;
  font-size: 1.4vw;
  margin-top: 0.8vw;
  row-gap: 0.5rem;
  color: rgb(255, 255, 255);
}

.join-googlemap {
  display: flex;
  padding: 1.2vw 1.2vw 0;
  height: 25vw;
  /* flex: auto; */
  vertical-align: bottom;
  align-items: center;
  align-content: center;
  text-align: center;
}

.join-us {
  width: 25vw;
  /* height: 15vw; */
  border-right: 0.3rem solid rgb(144, 136, 136);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.join-us p {
  font-size: 2.4vw;
  margin: 0 0 0;
  text-align: center;
  display: block;
  height: 3vw;
  width: 10vw;
}

.follow-link{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 18.3vw;
  row-gap: 2vw;
  padding: 1.6vw 0;
}

.join-us img {
  width: 4vw;
  display: inline-block;
  align-items: center;
  vertical-align: bottom;
}

a.map-link{
  display: inline-block;
  width: 70%;
  height: 80%;
}

h3.go-map {
  width: 30rem;
  /* height: 40rem; */
  font-size: 3.5rem;
  padding: 0 0.8rem;
  margin: 0.6rem 0 0.6rem;
  vertical-align: 350%;
  text-align: center;
  display: inline-block;
}

img.go-map {
  width: 50vw;
  height: 12vw;
  margin: 1rem 1rem 1rem;
  border-radius: 1rem;
  /* border: inset 0.2rem solid rgb(144, 136, 136); */
}

#laws{
    display: grid;
    grid-template-columns: repeat(9,1fr);
    font-size: 0.8vw;
    text-align: center;
    padding:1.5vw;
    /* width: 100vw; */
}

#copyright {
  /* font-size: 1rem; */
  padding: 0.4rem 0;
  margin: 0 0 1rem;
  border-top: 0.2rem solid rgb(43, 224, 122);
  border-bottom: 0.2rem solid rgb(43, 224, 122);
  display: block;
  text-align: center;
}

nav, header, footer{
  width: 100%;
}


.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 32, 32, 0.7); /* Semi-transparent white background */
  z-index: 9999; /* Ensure the loader is on top of other elements */
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Disable pointer events so it doesn't interfere with the content beneath */
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #4CAF50; /* Green color */
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 2s linear infinite, fadeOut 1s 3s forwards;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes fadeOut {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}