.contact-page-wrapper {
 background: rgba(249, 249, 249, 1);
}

.contact-section {
 margin-top: 20px;
 padding-bottom: 60px;
}

.contact-cards {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}

.contact-card {
 padding: 20px;
 border-radius: 15px;
 background: #FFF;
 box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.07);
 display: flex;
 flex-direction: column;
 gap: 10px;
 justify-content: space-between;
}

.contact-card-title {
 color: #000;
 font-size: 16px;
 font-weight: 500;
}

.contact-card-info-wrapper {
 display: flex;
 gap: 10px;
}

.contact-card-info span {
 color: #787878;
 font-size: 13px;
 font-weight: 300;
 line-height: 140%;
 display: block;
 margin-top: 9px;
}

.contact-card-icon {
 line-height: 0;
}

.contact-card-icon svg {
 min-width: 30px;
 width: 30px;
 height: 30px;
}

.contact-card-link {
 color: #363636;
 font-size: 16px;
 font-weight: 500;
 line-height: 140%;
 margin-top: 4px;
 display: inline-block;
 transition: all .3s;
 position: relative;
}

.contact-card-link::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0%;
 height: 1px;
 background-color: transparent;
 transition: width 0.3s ease;
}

.contact-card-link:hover {
 color: #E63737;
}

.contact-card-link:hover::after {
 background-color: rgba(230, 55, 55, 0.30);
 width: 100%;
}

.contact-card-social {
 display: flex;
 align-items: center;
 justify-content: space-around;
 margin-bottom: 16px;
 margin-top: 19px;
}

.card-social-link {
 display: flex;
 flex-direction: column;
 gap: 6px;
 align-items: center;
}

.social-link-icon {
 line-height: 0;
}

.social-link-icon svg {
 min-width: 62px;
 width: 62px;
 height: 62px;
 aspect-ratio: 1/1;
}

.social-link-icon svg path {
 transition: all .3s;
}

.card-social-link:hover svg path:first-child {
 fill: #E63737;
}

.card-social-link:hover svg path:nth-child(2) {
 fill: #fff;
}

.social-link-text {
 color: #363636;
 font-size: 13px;
 font-weight: 600;
 line-height: 140%;
}

.contact-card-text {
 color: rgba(54, 54, 54, 0.8);
 font-size: 15px;
 font-weight: 300;
 line-height: 140%;
}








@media (max-width: 1200px) {
 .contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 }
}


@media (max-width: 768px) {


 .contact-section {
  margin-top: 25px;
  padding-bottom: 30px;
 }

 .contact-cards {
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
 }

 .contact-card {
  padding: 14px;
 }

 .contact-card-social {
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0;
  gap: 23px;
 }

 .social-link-icon svg {
  min-width: 50px;
  width: 50px;
  height: 50px;
 }
}