@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  padding: 5px 0px 0px 0px;
  background: #fff;
}
.header .inner {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .inner .menu {
  display: none;
  cursor: pointer;
}
.header .inner .logo {
  width: 182px;
  height: auto;
}
.header .inner .right {
  display: flex;
  align-items: center;
}
.header .inner .right a {
  font-family: "Inter", sans-serif;
  text-decoration: none;
  font-size: 22px;
  font-weight: normal;
  color: #000;
  margin-left: 20px;
}
.header .inner .right .cross{
    display: none;
}
.hero {
  width: 100%;
  margin-bottom: 46px;
}
.hero img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

/* our gallery here  */
.ourGallery {
  max-width: 1300px;
  width: 90%;
  margin: auto;
}
.ourGallery h2 {
  text-align: center;
  margin-bottom: 46px;
  font-size: 32px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  margin-bottom: 46px;
}
.ourGallery .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.ourGallery .row img {
  width: 32%;
  height: 301px;
  object-fit: cover;
  margin-bottom: 2%;
}

.ourGallery a {
  display: block;
  margin: auto;
  width: 169px;
  height: 51px;
  border: 2px solid #737373;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 0px 10px 0px 30px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #737373;
  margin-bottom: 46px;
}

/* our services here /====== */
.ourServices {
  width: 100%;
  padding: 60px 0px;
  background: #d9d9d9;
  margin-bottom: 46px;
}
.ourServices h2 {
  text-align: center;
  margin-bottom: 46px;
  font-size: 32px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  margin-bottom: 46px;
}
.ourServices .row {
  max-width: 1300px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.ourServices .row .left,
.ourServices .row .right {
  width: 49%;
}
.ourServices .row .left .checkMarkList,
.ourServices .row .right .checkMarkList {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.ourServices .row .left .checkMarkList img,
.ourServices .row .right .checkMarkList img {
  margin-right: 20px;
}
.ourServices .row .left .checkMarkList p,
.ourServices .row .right .checkMarkList p {
  font-size: 20px;
  font-family: "Inter", sans-serif;
  color: #000;
}

/* our client === */
.ourClient {
  width: 100%;
  margin-bottom: 100px;
}
.ourClient h2 {
  text-align: center;
  font-size: 32px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  margin-bottom: 46px;
}
.ourClient .row {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ourClient .row .card {
  width: 32%;
  padding: 58px 30px;
  background: #ffde59;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2%;
}
.ourClient .row .card img {
  width: 60%;
}

/* footer ===== */
.footer {
  width: 100%;
  background: #000;
  padding: 34px 5%;
}
.footer p {
  font-size: 22px;
  font-family: "Inter", sans-serif;
  color: #fff;
  text-align: center;
  margin-bottom: 34px;
}
.footer .row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .row a {
  text-decoration: none;
  color: #fff;
}
.footer .row img {
  margin: 0px 10px;
}

/* gallery page == for gallery there is same css used above */
.heroPath {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  margin-bottom: 46px;
}
.heroPath .inner p {
  color: #000;
  font-size: 22px;
  font-family: "Inter", sans-serif;
}
.heroPath .inner h2 {
  text-align: center;
  font-size: 32px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}

/* contact page here ==== */
.contact {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  background: #d9d9d9;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 46px;
}
.contact .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact .row .left,
.contact .row .right {
  width: 48%;
}

.contact .row .left .info {
  margin-bottom: 35px;
}
.contact .row .left .info .head {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.contact .row .left .info .head img {
  margin-right: 20px;
  width: 30px;
}
.contact .row .left .info .head h4 {
  font-size: 22px;
  font-weight: bold;
  font-family: "Inter", sans-serif;
  color: #000;
}
.contact .row .left .info a,
.contact .row .left .info p {
  font-family: "Inter", sans-serif;
  text-decoration: none;
  font-size: 22px;
  font-weight: normal;
  color: #000;
}
.contact .row .right form {
  width: 90%;
  display: block;
  margin-left: auto;
}
.contact .row .right form input {
  width: 100%;
  height: 49px;
  padding: 0px 20px;
  background: #fff;
  border: none;
  outline: none;
  box-shadow: none;
  margin-bottom: 14px;
  border-radius: 7px;
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}
.contact .row .right form textarea {
  width: 100%;
  height: 133px;
  padding: 20px;
  background: #fff;
  border: none;
  outline: none;
  box-shadow: none;
  margin-bottom: 14px;
  resize: none;
  border-radius: 7px;
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}
.contact .row .right form a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: #737373;
  color: #fff;
  border-radius: 40px;
  width: 160px;
  height: 51px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
}
/* For most modern browsers */
input::placeholder,
textarea::placeholder {
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}

/* For Internet Explorer 10+ */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}

/* For Mozilla Firefox 18- */
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}

/* For Mozilla Firefox 19+ */
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
}

/* For WebKit browsers (Chrome, Safari, Opera 15+) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 18px;
  color: #000;
}

/* about us here ==== */
.aboutus {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  margin-bottom: 100px;
}
.aboutus h2 {
  text-align: center;
  margin-bottom: 46px;
  font-size: 32px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  margin-bottom: 46px;
  color: #000;
}
.aboutus p {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  color: #000;
  text-align: center;
}

@media (max-width: 1100px) {
  .ourGallery .row img {
    height: auto;
  }
  .hero img {
    height: auto;
  }
}

@media (max-width: 1000px) {
  .ourServices .row .left {
    width: 60%;
  }
  .ourServices .row .right {
    width: 40%;
  }
}
@media (max-width: 900px) {
  .ourGallery .row img {
    height: auto;
    width: 48%;
    margin-bottom: 4%;
  }
}
@media (max-width: 869px){
    .ourClient .row .card{
        width: 48%;
    }
}
@media (max-width: 800px) {
  .contact .row {
    flex-wrap: wrap;
  }
  .contact .row .left {
    margin-bottom: 50px;
  }
  .contact .row .left,
  .contact .row .right {
    width: 100%;
  }
  .contact .row .right form {
    width: 100%;
  }
  .ourServices .row {
    flex-wrap: wrap;
  }
  .ourServices .row .left,
  .ourServices .row .right {
    width: 100%;
  }
}
@media (max-width: 767px){
.ourGallery .row img{
display: none;
}
.ourGallery .row img.mobileImg{
  display: block!important;
}
}
@media (max-width: 700px) {
  .header .inner .menu {
    display: block;
  }
  .header .inner .right {
    /* display: none; */
    transition: 0.4s;
    position: fixed;
    top: 0px;
    left: -100%;
    z-index: 9999;
    flex-direction: column;
    bottom: 0px;
    background: #fff;
    /* max-width: 400px; */
    width: 100%;
  }
  .header .inner .right a:nth-child(1){
    margin-top: 50px;
  }
  .header .inner .right a{
    display: block;
    text-align: left;
    width: 90%;
    padding: 10px;
  }
  .header .inner .right .cross{
    display: block;
margin-left: auto;
margin-right: 20px;
margin-top: 20px;
cursor: pointer;
}
}
@media (max-width: 500px) {
  .ourGallery .row img {
    height: auto;
    width: 100%;
    margin-bottom: 4%;
  }
}

@media (max-width: 400px){
    .ourClient .row .card{
        width: 100%;
    }
}