body {
   min-height: 100vh;
}

.contact {
   background: rgb(11, 32, 99);
   background: linear-gradient(135deg, rgba(11, 32, 99, 1) 100%, rgba(51, 61, 143, 1) 0%);
   /* background: url("../Imagenes/backgroundStyle.jpg") no-repeat center center/cover; */
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   color: var(--gray-100);
   padding-bottom: 122px;
   overflow: hidden;
   position: relative;
   z-index: 0;
   min-height: 100vh;
}

@media(max-width:800px) {
   .contact {
      padding-top: 50px;
   }
}

.masterIcon.masterIcon--contact {
   bottom: -64px;
   right: -64px;
}

.main__container {

   /* outline: 2px dotted green; */
}

.contact__title {
   padding: 4rem 0 1.5rem 0;
   font-size: 4rem;
   text-transform: uppercase;
   text-align: end;
   letter-spacing: 4px;
   /* outline: 1px solid blue; */
}

.contact__style {
   display: flex;
   justify-content: space-between;
   /* outline: 1px solid yellow; */
}

.contactCard {
   font-size: 1.4rem;
   background-color: var(--gray-800);
   border-radius: 8px;
   width: 30%;
   min-width: fit-content;
   padding: 2.5rem 3rem 2.5rem 5rem;
   overflow: hidden;
   position: relative;
   /* outline: 1px solid red; */
}

.contactCard::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 12px;
   background-color: var(--primary-600);
}

.contactCard__row {
   padding: 1rem 0;
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: flex-start;
   /* outline: 1px solid yellow; */
}


.contactCard__row.contactCard__row--inverted {
   margin-top: 2rem;
   flex-direction: row-reverse;
}

.contact__info {
   padding-right: 1.5rem;
   font-size: 1.5rem;
   /* outline: 1px solid red; */
}

@media (max-width:1250px) {

   body {
      min-height: 100vh;
      background-color: var(--gray-800);
   }

   .contact__title {
      padding: 1.5rem 1.25rem;
      font-size: 2.5rem;
      text-align: start;
      letter-spacing: 2px;
      /* outline: 1px solid blue; */
   }

   .contact__style {

      flex-direction: column;
      gap: 22px;
      /* outline: 1px solid yellow; */
   }


   .contact__info {
      order: 0;
      padding: .75rem;
      text-align: center;
      font-size: 1rem;

   }

   .contactCard {
      order: 1;
      font-size: 1rem;

      background-color: var(--gray-800);
      border-radius: 8px;
      width: 30%;
      min-width: fit-content;
      padding: 1.5rem 1.5rem 0 1.5rem;
      overflow: hidden;
      position: relative;
      /* outline: 1px solid red; */
   }

   .contactCard__row.contactCard__row--inverted {
      margin-top: 0;
   }

   .masterIcon.masterIcon--contact {
      bottom: 0px;
      right: -20px;
      width: 300px;
      height: 300px;
   }


   .contact {

      /* padding-bottom: 3rem; */
      min-height: 0;
   }
}