@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
}

.heading{
  margin: 10px 0px;
  width: 100%;
  height: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(228, 228, 228);
}

.heading h1{
  color: red;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.678);
}

.contact-homepage {
  margin: 20px 0px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-homepage .content {
  background-image: url("../images/dehofoo/blog.jpg");
     /* Safari 6.0 - 9.0 
    /*filter: grayscale(100%);*/
  width: 100%;
  /*-webkit-filter: grayscale(100%);*/
  height: 450px;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contact-homepage .content h1 a {
  font-size: 80px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: 1000;
  cursor: url("data:image/svg+xml,%3Csvg width='117' height='127' viewBox='0 0 117 127' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.876227 8.6663C-0.316445 2.86448 5.78685 -1.70402 11.0174 1.07528L112.417 54.9543C117.809 57.8195 117.268 65.9006 111.62 68.2217C99.0405 73.3914 81.2886 81.4925 69.6636 90.2084C58.1058 98.8738 45.4158 113.536 36.9507 124.106C33.133 128.873 25.2257 127.116 23.9959 121.133L0.876227 8.6663Z' fill='%23FF0055'/%3E%3C/svg%3E%0A");
  
}

.contact-homepage .content p {
  width: 50%;
  color: white;
  text-align: center;
}

.contact-homepage .content #btn {
  text-decoration: none;
  padding: 8px 20px;
  background-color: rgb(255, 255, 255);
  border:1 px solid rgb(255, 255, 255);
  border-radius: 25px;
  color: rgb(0, 0, 0);
  font-weight: 600;
}

.contact-homepage .content #btn:hover {
  background-color: gray;
  border:1 px solid rgb(255, 255, 255);
}

.details-cards {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.details-cards .content {
  width: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgb(231, 231, 231);
}

.details-cards .content .detail-card {
  width: 300px;
  height: 100%;
  padding: 10px;
  margin: 20px;
  background-color: rgb(245, 245, 245);
  border-radius: 10px;
  color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: left;
  box-shadow: rgba(0, 0, 0, 0.205) 0px 5px 15px;
  flex-direction: column;
}

.details-cards .content .detail-card .details {
  margin: 8px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.details-cards .content .detail-card i {
  font-size: 30px;
  color: crimson;
}

.details-cards .content .detail-card .details p:nth-of-type(1) {
  font-weight: 600;
  color: crimson;
}

.details-cards .content .detail-card .details p:nth-of-type(2) {
  font-size: 11px;
}

.map {
  width: 100%;
  background-color: rgb(231, 231, 231);
  display: flex;
  justify-content: center;
  align-items: center;
}

.map .content {
  width: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map .content iframe {
  width: 100%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .contact-homepage .content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    padding: 25px 0px;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    color: rgb(255, 255, 255);
  }

  .contact-homepage .content h1 a {
    color: rgb(255, 255, 255);
    font-size: 30px;
  }

  .contact-homepage .content p {
    width: 80%;
  }

  .map .content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .map .content iframe {
    width: 100%;
  }

  .details-cards .content {
    /* background-color: black; */
    border-radius: 10px;
    width: 90%;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 767px) {
  .contact-homepage .content {
    background-image: linear-gradient(black, black);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    color: rgb(255, 255, 255);
  }
  .contact-homepage .content h1 a {
    color: rgb(255, 255, 255);
    font-size: 35px;
  }
  .map .content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .map .content iframe {
    width: 90%;
  }
}

@media only screen and (min-device-width: 1500px) and (max-device-width: 1824px) {
  .footer {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer .content {
    width: 1500px;
  }
  .copyright {
    width: 100%;
  }
}