.hero_bg {
  background-image: url(../images/hero_bg.jpg);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

.hero_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hero_img {
  display: flex;
}
.hero_img img {
  width: 80%;
  /* height: 90%; */
  object-fit: cover;
}

.hero_btn button {
  padding: 15px 45px;
  background-color: #662c91;
  border: none;
  color: #fff;
}
.hero_btn {
  width: 100%;
  margin-top: 25px;
}

.hero_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.hero_text h4 {
  width: 100%;
  font-family: "Bricolage Grotesque", serif;
  text-transform: uppercase;
  font-size: 30px;
  color: #b97b1d;
}

.hero_text h1 {
  font-size: 75px;
  line-height: 75px;
  color: #662c91;
}

.hero_text p {
  margin-top: 20px;
  width: 100%;
}

.about_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.about_all {
  padding: 0 8%;
  padding-block: 50px;
  background-color: #fff;
}
.about_text h1 {
  padding-block: 10px;
  font-size: 45px;
  line-height: 45px;
  color: #662c91;
}

.about_text h4 {
  color: #b97b1d;
}
.about_text p {
  padding-block: 20px;
}

.about_text h3 {
  color: #b97b1d;
  margin-bottom: 10px;
}

.values_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.values_grid p {
  padding-top: 2px;
  display: flex;
  gap: 10px;
}

.values_grid i {
  color: #662c91;
}

.about_img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.about_img img {
  width: 100%;
}

.about_one {
  margin-top: 100px;
}

.services_all {
  background-color: #f2f4f6;
  padding: 0 8%;
  padding-block: 50px;
}

.services_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.services_box {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  padding: 0 5%;
  padding-block: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.services_box h3 {
  width: 100%;
  margin-bottom: 10px;
  color: #b97b1d;
}

.services_title h1 {
  text-align: center;
  color: #662c91;
  font-size: 35px;
}

.services_box:hover {
  background-image: url(../images/logo_white.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #662c91;
  transition: 0.5s ease-in-out;
  color: #fff;
}

.services_box:hover h3 {
  color: #fff;
}

.testimonial_all {
  padding: 0 8%;
  padding-block: 50px;
  background-color: #fff;
}

.testiomonial_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.testimonial_one {
  /* border: 2px dashed #3333; */
  padding: 0 5%;
  padding-block: 50px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 30px;
  margin-top: 50px;
}
.testimonial_one h3 {
  color: #662c91;
}
.testimonial_one:hover h3 {
  color: #fff;
}
.testimonial_one:hover {
  background-image: url(../images/logo_white.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #662c91;
  transition: 0.5s ease-in-out;
  color: #fff;
}
.testimonial_one p {
  margin-top: 15px;
}

.testimonial_title h1,
.contact_title h1 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 40px;
  color: #662c91;
}

.testimonial_title p,
.contact_title p {
  text-align: center;
}
.contact_all {
  padding: 0 8%;
  padding-block: 50px;
}

.contact_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.contact_details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact_box {
  width: 100%;
  padding: 0 5%;
  padding-block: 50px;
  margin-top: 30px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  background-color: #fff;
  text-align: center;
}
.contact_box h1 {
  font-size: 50px;
  color: #662c91;
  margin-bottom: 10px;
}
.contact_box a {
  color: #000;
}

.hero {
  background-color: #662c91;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 20px;
}
.hero h1 {
  font-size: 3rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.welcome-message {
  margin: 0 8%;
  padding: 0 5%;
  padding-block: 40px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.6;
  animation: fadeIn 2s ease-in-out;
}
.welcome-message h2 {
  color: #662c91;
  margin-bottom: 20px;
  text-align: center;
}
.welcome-message p {
  margin: 15px 0;
}

.v_m_grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 0 8%;
}

.vision{
    background-color: #fff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 0 5%;
    padding-block: 30px;
    margin-top:50px;
}
.mission{
    background-color: #fff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 0 5%;
    padding-block: 30px;
    margin-top:50px;
}
.vision h2, .mission h2{
    color: #662c91;
    margin-bottom: 20px;
}
.service_all{
    padding: 0 8%;
}
@media only screen and (max-width: 1210px) {
  .hero_text h1 {
    font-size: 50px;
    line-height: 50px;
    width: 100%;
  }
}

@media only screen and (max-width: 1110px) {
  .hero_grid {
    display: flex;
    flex-direction: column-reverse;
  }
  .hero_text {
    padding: 0 5%;
    margin-top: 40px;
  }

  .hero_text h1 {
    padding-block: 15px;
  }

  .about_grid {
    display: flex;
    flex-direction: column;
  }

  .services_grid,
  .testiomonial_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .contact_grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .v_m_grid{
    display: grid;
    grid-template-columns: 1fr ;
    gap: 0px;
    padding: 0 8%;
}
}

@media only screen and (max-width: 810px) {
  .services_grid,
  .testiomonial_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
  }
}