/* ------------------------------------ services ------------------------------------- */

.section-services .main-heading {
  text-align: center;
  font-size: 4.2rem !important;
  letter-spacing: 3px;
  border: none;
}



.services-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  /* justify-content: center; */
  height: 100vh;
  overflow: hidden;
}
/* 
.services-container h3{
 font-size: 1.8rem;
 font-weight: bold;
 margin: 0px;
 margin-top: 0px;
 margin-bottom: 0px; */
 /* color: #d7c080; */
 /* border-bottom: 1px solid;
 margin: auto;
 margin-bottom: 1rem;
} */
.services-container h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #d7c080;
  /* border-bottom: 1px solid; */
  margin: auto;
  margin-bottom: 1rem;
}


.services-container .no {
  /* padding: 0.5rem 0.8rem; */
  height: 2.5rem;
  width: 2.5rem;
  text-align: center;
  padding: auto;
  display: inline-block;
  /* background: #d7c080; */
  color: #d7c080;
  margin-right: 0.8rem;
  padding-top: 0.3rem;
  border-radius: 100%;
}
.services-container p {
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0px;
  COLOR: #FFFF;
}

/* 
.service-content {
 /* height: 90%; */
 /* display: flex;
 justify-content: space-between;
 gap: 1rem; */
 /* align-items: center; */
/* } */ 
.service-content {
    padding-left: 20px;
    width: 95%;
    /* height: 90%; */
    display: flex;
    /* gap: 0rem; */
    /* justify-content: space-evenly; */
    /* align-content: flex-start; */
}


.service-content .side{
 height: 100%;
 flex: 0 0 50%;
 width: 100%;
 margin: 0px 1rem;
 
}

.service-item {
 margin: auto 0px;
 padding: 1rem;
 /* border-top: 2px solid #d7c080; */
 /* background: rgba(0, 0, 0, 0.3); */
 /* margin-bottom: 1rem; */
}

#myBtn {
 border: none;
 background: transparent;
 /* color: blueviolet; */
 display: inline;
}

#myBtn:focus {
 border: none;
 outline: none;
}

@media (max-width: 1020px) {
  .services-container {
    padding-bottom: 0rem;
    padding-top: 0rem;
  }
/* .services-container h2 {
    margin-top: 0px;
  } */
.services-container h3 {
  margin-bottom: 0rem;
}
 .service-content {
  gap: 0rem;
 }

 .service-item {
  padding: 0rem;
 }
}

@media (max-width: 750px) {
 .services-container h3 {
  margin-bottom: 0.3rem;
 }
 .service-content {
  gap: 0rem;
 }

.service-content .side {
 margin: 0px 0.5rem;
}
.service-content p {
font-size: 1.1rem;
  line-height: 1.3;
}
}

@media (max-width: 750px) {
 .services-container h3 {
  margin-bottom: 0.3rem;
  font-size: 1.3rem;
 }

 .service-content {
  gap: 0rem;
 }

 .service-content .side {
  margin: 0px 0.5rem;
 }
}

@media (max-width: 600px) {
.service-content {
  display: grid;
}

.service-content .side {
     flex: 0 0 100%;
}
.services-container p {
 font-size: 1rem;
 line-height: 1.2;
}

.services-container .no {
 height: 1.5rem;
 width: 1.5rem;
 padding: auto;
 margin-right: 0.5rem;
 padding-top: 0.2rem;
}

.services-container h3 {
 font-size: 1rem;
 /* margin-bottom: 1rem; */
}
}

@media (max-width: 500px) {
.services-container p {
  font-size: 0.9rem;
  line-height: 1.1;
 }
}

@media (max-width: 410px) {
 .services-container p {
  font-size: 0.8rem;
  line-height: 1;
 }
}

/* ------------------------------------ services ------------------------------------- */



/* ------------------------------------ other services ------------------------------------- */













/* ------------------------------------ other services ------------------------------------- */


/* ------------------------------------ why us ------------------------------------- */

    .section-why-us{
     display: flex;
     /* background-image: url(../resources/img/Affiliation.webp); */
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)),url(../resources/img/garage/part/1.webp);
     background-size: cover;
     overflow: hidden;
     position: relative;
    }

   .section-why-us ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 34px;
    width: 60%;
   }

  .section-why-us ul li::before {
   color: #d7c080;
  }

    .section-why-us ul li{
     padding: 2rem 1rem;
     background: rgba(255,255,255,0.2);
     font-size: 1.4rem;
     color: white;
     border-left: 5px solid #d7c080;
     margin-bottom: 1rem;;
    }

  .whyus-container{
   height: 100%;
   width: 100%;
   padding: 2rem 4rem;
   position: absolute;
   top: 0%;
   right: 0%;
  }

.whyus-container h2 {
  padding-right: 1.5rem;
 padding-top: 10px;
 max-width: 600px;
 text-transform: uppercase;
 font-weight: bold;
 color: #d7c080;
 font-size: 36px;
 letter-spacing: 6px;
 transition-duration: 1s;
 transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.whyus-container h2 span  {
  border-bottom: 1px solid;
}

@media (max-width: 1000px) {

  .whyus-container {
    padding: 2rem 3rem;
   }
 .section-why-us ul {
   width: 85%;
   margin-top: 34px;
  }

.whyus-container h2 {
 padding-top: 10px;
 font-size: 30px;
}
}

@media (max-width: 650px) {

 .whyus-container {
  padding: 2rem;
 }

 .section-why-us ul {
  width: 100%;
 }

 .section-why-us ul li {
  padding: 1.2rem;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
 }

.whyus-container h2 {
 font-size: 24px;
}

}

@media (max-width: 468px) {

 .whyus-container {
  padding: 2rem;
 }

 .section-why-us ul li {
  padding: 1rem;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
 }

 .whyus-container h2 {
  font-size: 20px;
 }

}


/* ------------------------------------ why us ------------------------------------- */




/* ------------------------------------ gallary ------------------------------------ */
.section-gallery {
 height: 100vh;
 background-color: rgba(255,255,255,0.2);
}
.projects {
 height: 100%;
      overflow: hidden;
      padding: 0.5rem;
}


.projects .box-container {
 height: 100%;
 width: 100%;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;
 grid-gap: 0.3rem;
 grid-template-areas:
  'Project-1 Project-1 Project-2 Project-3'
  'Project-4 Project-5 Project-6 Project-6';
}

.Project-1 {
 grid-area: Project-1;
}

.Project-2 {
 grid-area: Project-2;
}

.Project-3 {
 grid-area: Project-3;
}

.Project-4 {
 grid-area: Project-4;
}

.Project-5 {
 grid-area: Project-5;
}

.Project-6 {
 grid-area: Project-6;
}

.project-item {
 /* height: 30rem; */
 overflow: hidden;
 position: relative;
}

.project-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.project-item .content {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: end;
 -ms-flex-pack: end;
 justify-content: flex-end;
 -webkit-box-align: end;
 -ms-flex-align: end;
 -ms-grid-row-align: flex-end;
 align-items: flex-end;
 content: "";
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 z-index: 1;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 background: rgba(0, 0, 0, 0.3);
}



.project-item .content .text {
 position: absolute;
 top: 0;
 left: 0;
 /* scale: 0; */
 padding: 1rem;
}


.project-item .content .text h4 {
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  color: #fff;
  margin-top: 0px;
}

@media (max-width: 991px) {
 .project-item .content .text h4 {
   font-size: 1.8rem;
  }
}


@media (max-width: 550px) {
    .projects .box-container {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-gap: 0.3rem;
      grid-template-areas:
       'Project-1'
       'Project-2'
       'Project-3'
       'Project-4'
       'Project-5'
       'Project-6';
        /* grid-template-areas:
          'Project-1 Project-2'
          'Project-3 Project-4'
          'Project-5 Project-6'; */
     }
     .project-item .content .text h4 {
      font-size: 1rem;
  }
}

@media (max-width: 350px) {
.projects {
    padding: 0rem 0.5rem;
  }
 .projects .box-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 0.2rem;
      grid-template-areas:
             'Project-1'
             'Project-2'
             'Project-3'
             'Project-4'
             'Project-5'
             'Project-6';
 }
.project-item .content .text h4 {
 font-size: 0.9rem;
}
}