body {
  margin: 0;
  font-family: "Montserrat", sans-serif;

}

/* ************************************************************* */
/* landing section  */
/* ************************************************************* */
.landing {
  position: relative;
  /* border: 1px solid red; */
  min-height: 40vh;
  background: url("../images/hero.jpg");
  background-size: cover;
  padding-bottom: 2rem;
}

.landing .container {
  padding: 1rem 0rem;
  /* border: 1px solid red; */
  color: white;
  text-align: center;
  width: 90%;
  margin: auto;
  margin-bottom: 5rem;
}

.landing .container h1 {
  font-size: var(--font-heading1);
  margin: 2rem 0rem;
  width: 100%;
  /* border: 1px solid red; */
}

.landing .container p {
  font-size: var(--font-para1);
  margin: 3rem 0rem;
  width: 90%;
  margin: auto;
  letter-spacing: .15rem;
}

.landing .container a {
  display: block;
  font-size: var(--font-para3);
  border: 1px solid rgb(238, 238, 238);
  padding: 1.5rem 2.5rem;
  background-color: var(--deep-orange);
  cursor: pointer;
  color: white;
  z-index: 999;
  color: black;
  font-weight: 600;
  letter-spacing: 0.1rem;
  width: fit-content;
  margin: 5rem auto;
}

.landing .container a:hover {
  background-color: white;
  color: black;
  border: 1px solid black;
}

.landing img:nth-child(3) {
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 45rem;
  /* border: 1px solid red; */
}

.landing img:nth-child(2) {
  position: absolute;
  bottom: -30%;
  /* border: 1px solid red; */
  right: 0;
  width: 45rem;
}

/* ************************************************************* */
/* testimonials section  */
/* ************************************************************* */

.testimonials {
  min-height: 20vh;
  padding: 5rem 0rem;
  background-color: var(--deep-blue);
  margin-top: 12rem;

}

.testimonials .container {
  /* border: 1px solid red; */
  display: flex;
  width: 90%;
  margin: auto;
  gap: 4rem;
}

.testimonials .container .form {
  background-color: var(--deep-orange);
  border-radius: 2rem;
  width: 35%;
  min-height: 60vh;

}

.testimonials .container .content {
  width: 65%;
}

.testimonials .container .content h3 {
  font-size: var(--font-heading2);
  margin: 2rem 0rem;
  color: white;
  font-family: "Ubuntu", sans-serif;
  /* border: 1px solid red; */
}

.testimonials .container .content p {
  color: white;
  font-size: var(--font-para2);
  margin-top: 2rem;
}

/* ************************************************************* */
/* about section  */
/* ************************************************************* */
.about {
  /* margin-top: 10rem; */
  position: relative;
  /* border: 1px solid red; */
}

.about .container {
  /* border: 1px solid black; */
  width: 90%;
  margin: auto;
  padding: 5rem 1rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* border: 1px solid red; */
  gap: 4rem;
}

.about .container .aboutImg {
  /* flex: 0 0 30%; */
  /* min-height: 320px; */
  /* aspect-ratio: 4/3; */
  flex: 0.3;
  position: relative;
  height: 100%;
  /* border: 1px solid red; */
}

.about .container .aboutImg img {
  border-radius: 1.9rem;
  width: 100%;
  /* object-fit: cover; */
  /* border: 1px solid red; */
}

.about .container .content {
  flex: 0.7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 1rem; */
  justify-content: flex-start;
}

.about .container .content .title {
  padding: 1rem 4rem;
  border-radius: 0.5rem;
  width: fit-content;
  font-size: var(--font-para1);
  background-color: var(--deep-orange);
  color: white;
  font-weight: bold;
}

.about .container .content h2 {
  margin: 1rem 0rem;
  font-size: var(--font-heading3);
  line-height: 5rem;
  /* border: 1px solid red; */
  font-family: "Ubuntu", sans-serif;
  color: var(--header-color);
}

.about .container .content p {
  font-size: var(--font-para3);
  line-height: 1.5;
  color: var(--sub-header-color);
}

.about .container .content h3 {
  font-size: var(--font-para1);
  color: var(--header-color);
  position: relative;
}

.about .container .content h3::before {
  /*background-color: var(--deep-orange);*/
  width: 100%;
  height: 0.5rem;
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
}

.about .container .content .options {
  display: grid;
  /* border: 1px solid red; */
  row-gap: 1rem;
  /* column-gap: 1rem; */
  grid-template-columns: auto auto;
  width: 90%;
  border-left: 0.7rem solid var(--deep-orange);
  padding-left: 1rem;
  color: var(--header-color);
}

.about .container .content .options span {
  font-size: var(--font-para2);
  color: var(--header-color);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  /* border: 1px solid red; */
}

.about .container .content .contact {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-top: 6rem;

}

.about .container .content .contact>div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  border: 1px solid green;
  font-size: var(--font-para2);
  background-color: rgb(78, 78, 252);
  color: white;
  gap: 1rem;
  border-radius: 0.3rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 1rem 2rem;
  margin-right: 5rem;
}

.about .container .content .contact>div:nth-child(1) div {
  background-color: white;
  padding: 1rem;
  border-radius: 0.4rem;
}

.about .container .content .contact>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about .container .content .contact>div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.about .container .content .contact>div .call {
  /* border: 1px solid red; */
  background-color: rgb(255, 160, 160);
  padding: 1rem;
  border-radius: 50%;
}

.about .container .content .contact>div .number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* border: 1px solid red; */
  font-size: var(--font-para2);
  text-wrap: nowrap;
}

.about .container .content .contact>div .number>span:nth-child(1) {
  font-weight: bold;
  color: var(--deep-orange);
}

.about .container .content .contact>div .number>span:nth-child(2) {
  font-weight: bold;
  font-size: var(--font-para3);

  color: var(--header-color);
}

/* ************************************************************* */
/* service section  */
/* ************************************************************* */
.services {
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-direction: column;
  min-height: 50vh;
  background-color: #F2F7FA;
  padding: 4rem 0rem;
}

.services>p {
  width: 80%;
  font-size: var(--font-para2);
  text-align: center;
  color: var(--sub-header-color);
}

.services .cards {
  width: 80%;
  margin: auto;
  display: flex;
  align-items: stretch;
  /* ensures all cards are same height */
  justify-content: center;
  gap: 4rem;
  font-size: var(--font-para2);
  text-align: center;
  flex-wrap: wrap;
}

.services .cards .eachCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Distributes space inside */
  flex: 1 1 30%;
  background-color: white;
  border-radius: 0.8rem;
  overflow: hidden;
  max-width: 30%;
  border: 1px solid black;
}


.services .cards .eachCard img {
  height: 20rem;
  min-width: 100%;
}

.services .cards .eachCard h3 {
  margin: 2rem 0rem;
  color: var(--header-color);
}

.services .cards .eachCard p {
  width: 95%;
  margin: auto;
  margin-bottom: 2rem;
  font-weight: 500;
  font-size: var(--font-para2);
  color: var(--sub-header-color);
}

.services .cards .eachCard a {
  width: 100%;
  outline: none;
  border: none;
  padding: 0.7rem;
  background-color: var(--deep-blue);
  color: white;
  border-radius: 0.4rem;
  cursor: pointer;
  margin-bottom: 0px;
  font-weight: bold;
}


/* ************************************************************* */
/* experience section  */
/* ************************************************************* */
.experience {
  background: url("/assets/images/footer_BG.jpg");
  background-size: cover;
  padding: 4rem;
  position: relative;
  margin-bottom: 8rem;
}

.experience p {
  font-family: "Ubuntu", sans-serif;
  margin: auto;
  text-align: center;
  color: white;
  font-size: var(--font-heading3);
  /* margin-bottom: 3rem; */
  width: 90%;
  margin-bottom: 3rem;

}

.experience>div:nth-child(2) {
  margin: auto;
  margin-bottom: 10rem;
  text-wrap: nowrap;
}

.experience .container {
  color: white;
  /* border: 1px solid red; */
  /* width: 70%; */
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: var(--deep-orange);
  padding: 2rem;
  border-radius: 1rem;
  gap: 3rem;
  position: absolute;
  bottom: -20%;
  left: 50%;
  width: 80%;
  trans.form: translateX(-50%);

}

.experience .container div {
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-wrap: nowrap;
  min-width: 100px;
}

.experience .container div .fa-solid {
  font-size: var(--font-heading3);
}

.experience .container div span {
  font-size: var(--font-heading3);
}



/* Why choose Us section starts here  */

.why {
  min-height: 50vh;
  padding: 4rem 0rem;
  padding-bottom: 0rem;
  /* border: 1px solid red; */
  background-color: #F2F7FA;
}

.why .container1 {
  width: 90%;
  margin: 2rem auto;
}

.why .container1 h2 {
  font-size: var(--font-heading2);
  width: 80%;
  margin: 2rem 0rem;
  color: var(--header-color);
  font-family: "Ubuntu", sans-serif;
}

.why .container1 p {
  font-size: var(--font-para2);
  color: var(--sub-header-color);
}

.why .container2 {
  /* border: 1px solid red; */
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 90%;
}

.why .container2 img {
  flex: 1;
  width: 20rem;
}

.why .container2 .right {
  flex: 1;
  /* border: 1px solid red; */
  margin: 2rem;
}

.why .container2 .right .item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: flex-start;
  gap: 3rem;
  margin: 6rem 0rem;
}

.why .container2 .right .item .icon {
  /* border: 1px solid rgb(99, 99, 99); */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
  max-width: 8rem;
  max-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.why .container2 .right .item .icon .orange {
  border: 2px solid orange;
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;

}

.why .container2 .right .item .icon .orange .fa-solid {
  color: var(--deep-orange);
  font-size: var(--font-para1);
}

.why .container2 .right .text {
  width: 70%;
}

.why .container2 .right .text h3 {
  font-size: var(--font-para1);
  color: var(--header-color);

}

.why .container2 .right .text p {
  margin-top: 1rem;
  font-size: var(--font-para3);
  color: var(--sub-header-color);
}

/* footer section starts from here  */


@media (max-width: 1100px) {
  .landing .container {
    width: 100%;
    /* border: 1px solid red; */
    margin-bottom: 0rem;
  }

  .landing .container p {
    margin-bottom: 1rem;
    width: 95%;
  }

  .landing .container a {
    margin-bottom: 0rem;
  }

  .landing img:nth-child(3) {
    display: none;
  }

  .landing img:nth-child(2) {
    display: none;
  }


  .testimonials {
    margin-top: 0rem;
  }

  .testimonials .container {
    /* border: 1px solid black; */
    gap: 2rem;
  }

  .testimonials .container .form {
    width: 40%;

  }

  .testimonials .container .content {
    width: 60%;
  }

  /* about section start from here .  */

  .about .container {
    /* border: 1px solid black; */
    width: 90%;
  }

  .about .container .aboutImg {
    flex: 0 0 40%;

  }

  .services>p {
    width: 90%;
    font-size: var(--font-para2);
    text-align: center;
  }

  .services .cards {
    width: 85%;
    /* Increase width for more space */
    gap: 2.5rem;
    /* Reduce gap slightly */
    flex-wrap: wrap;
    /* Allow cards to wrap to the next line */
    justify-content: center;
    /* Center cards in the row */
  }

  .services .cards .eachCard {
    /*
         Allow two cards per row (approx. 50% width minus half of the gap)
         flex-grow: 0 (don't grow), flex-shrink: 0 (don't shrink below basis), flex-basis: calculated width
        */
    flex: 0 0 calc(50% - 1.25rem);
    /* 50% width minus half the new gap (2.5rem / 2) */
    margin-bottom: 2.5rem;
    /* Add vertical space between rows */
    min-width: unset;
    /* Remove min-width constraint to allow calc() to work */
    max-width: unset;
    /* Remove max-width constraint */
  }

  .why .container1 {
    width: 90%;
    margin: 2rem auto;
  }
}

@media (max-width: 767px) {
  .about .container {
    flex-direction: column;
    gap: 3rem;
  }

  .services .cards {
    width: 90%;
    /* Increase width even more */
    gap: 2rem;
    /* Further reduce the gap */
  }

  .testimonials .container {
    flex-direction: column;
  }

  .testimonials .container .form {
    background-color: var(--deep-orange);
    border-radius: 2rem;
    width: 100%;
    min-height: 60vh;

  }

  .testimonials .container .content {
    width: 100%;
  }

  .services .cards .eachCard {
    flex: 0 0 calc(100% - 1rem);
    margin-bottom: 2rem;
  }

  .experience p {
    width: 80%;
  }

  .experience .container {
    flex-wrap: wrap;
    bottom: -20%;
    width: 80%;
    grid-template-columns: auto auto;
    /* align-items: flex-start; */
    /* justify-content: flex-start; */
  }

  .why .container1 h2 {
    width: 100%;
  }

  .why .container2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .why .container2 img {
    width: 100%;
  }


}

@media (max-width: 454px) {
  .about .container .content h2 {
    line-height: 3rem;
  }

  .about .container .content .contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
  }

  .about .container .content .options {
    grid-template-columns: auto;
  }

  .why .container2 .right {
    width: 100%;
    /* border: 1px solid red; */
    margin: auto;
  }



  .why .container2 .right .item {
    align-items: flex-start;
    flex-direction: column;
    margin: 1rem;
    margin-bottom: 4rem;
    align-items: center;
    gap: 1rem;
    /* border: 1px solid red; */
  }

  .why .container2 .right .item .icon {
    /* border: 1px solid rgb(99, 99, 99); */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    max-width: 8rem;
    max-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    display: none;
  }

  .why .container2 .right .item .icon {
    /* border: 1px solid rgb(99, 99, 99); */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;

  }

  .why .container2 .right .text {
    /* border: 1px solid red; */
    width: 100%;
  }
}